import React, {Component} from 'react';
import {View, Image, Text, TouchableOpacity} from 'react-native';
import {Modal, Provider} from '@ant-design/react-native';
import ImagePicker from 'react-native-image-crop-picker';
import {RetrieveData} from '../../data/storage';
import {GetDataPost, UploadImage} from '../../data/encryption';
import {ShowToast} from '../../components/rootToast/root_toast';

export default class personal_information extends Component {
  constructor(props) {
    super(props);
    this.props.navigation.dangerouslyGetParent().setOptions({
      tabBarVisible: false,
    });
    this.state = {
      headImage: '',
      userName: '',
      nickName: '',
      sex: '',
      companyName: '',
      address: '',
      phone: '',
      profiles: '',
    };
  }
  render() {
    return (
      <Provider>
        <View>
          <View
            style={{
              justifyContent: 'space-between',
              alignItems: 'center',
              flexDirection: 'row',
              backgroundColor: '#ffffff',
            }}>
            <Text style={{marginLeft: 10}}>头像</Text>
            <TouchableOpacity onPress={() => this.selectHeadImage()}>
              <View
                style={{
                  marginRight: 10,
                  flexDirection: 'row',
                  alignItems: 'center',
                }}>
                {this.state.headImage == '' ? (
                  <Image
                    source={require('../../source/img/personal/headImg.png')}
                    style={{
                      width: 55,
                      height: 55,
                      marginRight: 10,
                      borderRadius: 50,
                    }}
                  />
                ) : (
                  <Image
                    source={{uri: this.state.headImage}}
                    style={{
                      width: 55,
                      height: 55,
                      margin: 10,
                      borderRadius: 50,
                    }}
                  />
                )}
                <Text style={{fontSize: 20, color: '#999999'}}>{'>'}</Text>
              </View>
            </TouchableOpacity>
          </View>
          <View
            style={{
              justifyContent: 'space-between',
              alignItems: 'center',
              flexDirection: 'row',
              backgroundColor: '#ffffff',
              marginTop: 5,
              height: 45,
            }}>
            <Text style={{marginLeft: 10}}>用户名</Text>
            <View
              style={{
                marginRight: 10,
                flexDirection: 'row',
                alignItems: 'center',
              }}>
              <Text style={{marginRight: 10}}>{this.state.userName}</Text>
            </View>
          </View>
          <TouchableOpacity
            style={{
              justifyContent: 'space-between',
              alignItems: 'center',
              flexDirection: 'row',
              backgroundColor: '#ffffff',
              marginTop: 5,
              height: 45,
            }}
            onPress={() => {
              this.props.navigation.navigate('change_nick_name', {data: this});
            }}>
            <Text style={{marginLeft: 10}}>昵称</Text>
            <View
              style={{
                marginRight: 10,
                flexDirection: 'row',
                alignItems: 'center',
              }}>
              <Text style={{marginRight: 10}}>{this.state.nickName}</Text>
              <Text style={{fontSize: 20, color: '#999999'}}>{'>'}</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              justifyContent: 'space-between',
              alignItems: 'center',
              flexDirection: 'row',
              backgroundColor: '#ffffff',
              marginTop: 5,
              height: 45,
            }}
            onPress={() => {
              this.props.navigation.navigate('change_sex', {data: this});
            }}>
            <Text style={{marginLeft: 10}}>性别</Text>
            <View
              style={{
                marginRight: 10,
                flexDirection: 'row',
                alignItems: 'center',
              }}>
              <Text style={{marginRight: 10}}>
                {this.state.sex == 'M' ? '男' : '女'}
              </Text>
              <Text style={{fontSize: 20, color: '#999999'}}>{'>'}</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              justifyContent: 'space-between',
              alignItems: 'center',
              flexDirection: 'row',
              backgroundColor: '#ffffff',
              marginTop: 5,
              height: 45,
            }}
            onPress={() => {
              this.props.navigation.navigate('change_company', {data: this});
            }}>
            <Text style={{marginLeft: 10}}>公司</Text>
            <View
              style={{
                marginRight: 10,
                flexDirection: 'row',
                alignItems: 'center',
              }}>
              <Text style={{marginRight: 10}}>{this.state.companyName}</Text>
              <Text style={{fontSize: 20, color: '#999999'}}>{'>'}</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              justifyContent: 'space-between',
              alignItems: 'center',
              flexDirection: 'row',
              backgroundColor: '#ffffff',
              marginTop: 5,
              height: 45,
            }}
            onPress={() => {
              this.props.navigation.navigate('change_address', {data: this});
            }}>
            <Text style={{marginLeft: 10}}>地址</Text>
            <View
              style={{
                marginRight: 10,
                flexDirection: 'row',
                alignItems: 'center',
              }}>
              <Text style={{marginRight: 10}}>{this.state.address}</Text>
              <Text style={{fontSize: 20, color: '#999999'}}>{'>'}</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              justifyContent: 'space-between',
              alignItems: 'center',
              flexDirection: 'row',
              backgroundColor: '#ffffff',
              marginTop: 5,
              height: 45,
            }}
            onPress={() => {
              this.props.navigation.navigate('change_phone', {data: this});
            }}>
            <Text style={{marginLeft: 10}}>手机号</Text>
            <View
              style={{
                marginRight: 10,
                flexDirection: 'row',
                alignItems: 'center',
              }}>
              <Text style={{marginRight: 10}}>{this.state.phone}</Text>
              <Text style={{fontSize: 20, color: '#999999'}}>{'>'}</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              justifyContent: 'space-between',
              alignItems: 'center',
              flexDirection: 'row',
              backgroundColor: '#ffffff',
              marginTop: 5,
              height: 45,
            }}
            onPress={() => {
              this.props.navigation.navigate('change_profiles', {data: this});
            }}>
            <Text style={{marginLeft: 10}}>个人简介</Text>
            <View
              style={{
                marginRight: 10,
                flexDirection: 'row',
                alignItems: 'center',
              }}>
              <Text
                style={{marginRight: 10, width: 200}}
                ellipsizeMode={'tail'}
                numberOfLines={2}>
                {this.state.profiles}
              </Text>
              <Text style={{fontSize: 20, color: '#999999'}}>{'>'}</Text>
            </View>
          </TouchableOpacity>
        </View>
      </Provider>
    );
  }

  //加载信息
  componentDidMount(): void {
    this.getUserInformation();
  }

  //设置头像
  selectHeadImage = () => {
    Modal.operation([
      {text: '拍照', onPress: () => this.openCamera()},
      {text: '相册', onPress: () => this.openPicker()},
    ]);
  };

  //拍照选择头像
  openCamera = () => {
    ImagePicker.openCamera({
      width: 300,
      height: 400,
      cropping: true,
    }).then((image) => {
      this.setState({
        headImage: image.path,
      });
      this.setImage(image);
    });
  };

  //相册选择头像
  openPicker = () => {
    ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
    }).then((image) => {
      this.setState({
        headImage: image.path,
      });
      this.setImage(image);
    });
  };

  //设置头像
  setImage = async (image) => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      account = account.substring(1, account.length - 1);
      token = token.substring(1, token.length - 1);
      const url = 'https://app.taxbk.cn:9443/auth/comm/user/avatar/update';
      let response = await UploadImage(
        url,
        token,
        {
          mobile: account,
          reqChannel: 3,
        },
        image,
      );
      if (response) {
        if (response.code == 0) {
          ShowToast('修改头像成功！');
        }
      } else {
        ShowToast('服务器故障！');
      }
    }
  };

  //获取用户信息
  getUserInformation = async () => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      account = account.substring(1, account.length - 1);
      token = token.substring(1, token.length - 1);
      const url = 'https://app.taxbk.cn:9443/auth/comm/user/personalInfo/find';
      let response = await GetDataPost(
        url,
        token,
        {
          mobile: account,
        },
        false,
        2,
      );
      if (response) {
        if (response.code == 0) {
          this.setState({
            nickName: response.data.nickName,
            sex: response.data.sex,
            companyName: response.data.company,
            headImage: 'https://app.taxbk.cn:9443' + response.data.avatar,
            profiles: response.data.personalProfile,
            address: response.data.address,
            phone: response.data.mobile,
            userName: response.data.name,
          });
        }
      } else {
        ShowToast('服务器故障！');
      }
    }
  };
}