import React, {Component} from 'react';
import {
  View,
  Image,
  Text,
  TouchableOpacity,
  SafeAreaView,
  ScrollView,
  Alert,
  DeviceEventEmitter,
} from 'react-native';
import {WingBlank, WhiteSpace, Modal} from '@ant-design/react-native';
import { ClearAll, IndividualStorageData, RetrieveData } from "../../data/storage";
import {
  RequestNetwork,
  UploadImage,
} from '../../data/encryption';
import public_css from '../../source/css/public_css';
import {ToastShow} from '../../components/toast/toast';
import {rightArrowIcon} from '../../source/icon/icon';
import {SvgXml} from 'react-native-svg';
import ImagePicker from 'react-native-image-crop-picker';

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 (
      <SafeAreaView style={public_css.body}>
        <ScrollView>
          <TouchableOpacity
            onPress={() => {
              this.selectHeadImage();
            }}>
            <View
              style={{
                marginTop: 20,
                height: 100,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View>
                {this.state.headImage !== '' &&
                this.state.headImage !== null ? (
                  <Image
                    source={{uri: this.state.headImage}}
                    style={{
                      width: 80,
                      height: 80,
                      borderRadius: 60,
                    }}
                  />
                ) : this.state.sex === 'M' ? (
                  <Image
                    source={require('../../source/img/personal/man.png')}
                    style={{
                      width: 80,
                      height: 80,
                      borderRadius: 60,
                    }}
                  />
                ) : (
                  <Image
                    source={require('../../source/img/personal/woman.png')}
                    style={{
                      width: 80,
                      height: 80,
                      borderRadius: 60,
                    }}
                  />
                )}
              </View>
              <View
                style={{
                  position: 'relative',
                  justifyContent: 'center',
                  alignItems: 'center',
                  backgroundColor: '#000000',
                  width: 16,
                  height: 16,
                  borderRadius: 99,
                  top: -15,
                  left: 25,
                }}>
                <Image
                  source={require('../../source/img/personal/camera.png')}
                  style={{
                    width: 10,
                    height: 8.5,
                  }}
                />
              </View>
            </View>
          </TouchableOpacity>
          <WingBlank>
            <View
              style={{
                justifyContent: 'space-between',
                alignItems: 'center',
                flexDirection: 'row',
                borderBottomWidth: 0.5,
                borderBottomColor: '#808080',
                height: 45,
              }}>
              <Text style={{color: '#3C3C3C', fontWeight: 'bold'}}>用户名</Text>
              <TouchableOpacity style={{flexDirection: 'row'}}>
                <Text
                  ellipsizeMode={'tail'}
                  numberOfLines={1}
                  style={{
                    width: 100,
                    color: '#64646A',
                    textAlign: 'right',
                    marginRight: 20,
                  }}>
                  {this.state.userName}
                </Text>
              </TouchableOpacity>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                justifyContent: 'space-between',
                alignItems: 'center',
                flexDirection: 'row',
                borderBottomWidth: 0.5,
                borderBottomColor: '#808080',
                height: 45,
              }}>
              <Text style={{color: '#3C3C3C', fontWeight: 'bold'}}>昵称</Text>
              <TouchableOpacity
                style={{flexDirection: 'row'}}
                onPress={() => {
                  this.props.navigation.navigate('change_nick_name', {
                    data: this.state.nickName,
                    isRefresh: () => {
                      this.getUserInformation();
                    },
                  });
                }}>
                <Text
                  ellipsizeMode={'tail'}
                  numberOfLines={1}
                  style={{width: 200, color: '#64646A', textAlign: 'right'}}>
                  {this.state.nickName}
                </Text>
                <SvgXml height={20} xml={rightArrowIcon()} />
              </TouchableOpacity>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                justifyContent: 'space-between',
                alignItems: 'center',
                flexDirection: 'row',
                borderBottomWidth: 0.5,
                borderBottomColor: '#808080',
                height: 45,
              }}>
              <Text style={{color: '#3C3C3C', fontWeight: 'bold'}}>性别</Text>
              <TouchableOpacity
                style={{flexDirection: 'row'}}
                onPress={() => {
                  this.props.navigation.navigate('change_sex', {
                    data: this.state.sex,
                    isRefresh: () => {
                      this.getUserInformation();
                    },
                  });
                }}>
                <Text style={{color: '#64646A'}}>
                  {this.state.sex === 'M' ? '男' : '女'}
                </Text>
                <SvgXml height={20} xml={rightArrowIcon()} />
              </TouchableOpacity>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                justifyContent: 'space-between',
                alignItems: 'center',
                flexDirection: 'row',
                borderBottomWidth: 0.5,
                borderBottomColor: '#808080',
                height: 45,
              }}>
              <Text style={{color: '#3C3C3C', fontWeight: 'bold'}}>公司</Text>
              <TouchableOpacity
                style={{flexDirection: 'row'}}
                onPress={() => {
                  this.props.navigation.navigate('change_company', {
                    data: this.state.companyName,
                    isRefresh: () => {
                      this.getUserInformation();
                    },
                  });
                }}>
                <Text
                  ellipsizeMode={'tail'}
                  numberOfLines={1}
                  style={{width: 200, color: '#64646A', textAlign: 'right'}}>
                  {this.state.companyName}
                </Text>
                <SvgXml height={20} xml={rightArrowIcon()} />
              </TouchableOpacity>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                justifyContent: 'space-between',
                alignItems: 'center',
                flexDirection: 'row',
                borderBottomWidth: 0.5,
                borderBottomColor: '#808080',
                height: 45,
              }}>
              <Text style={{color: '#3C3C3C', fontWeight: 'bold'}}>地址</Text>
              <TouchableOpacity
                style={{flexDirection: 'row'}}
                onPress={() => {
                  this.props.navigation.navigate('change_address', {
                    data: this.state.address,
                    isRefresh: () => {
                      this.getUserInformation();
                    },
                  });
                }}>
                <Text
                  ellipsizeMode={'tail'}
                  numberOfLines={1}
                  style={{width: 200, color: '#64646A', textAlign: 'right'}}>
                  {this.state.address}
                </Text>
                <SvgXml height={20} xml={rightArrowIcon()} />
              </TouchableOpacity>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                justifyContent: 'space-between',
                alignItems: 'center',
                flexDirection: 'row',
                borderBottomWidth: 0.5,
                borderBottomColor: '#808080',
                height: 45,
              }}>
              <Text style={{color: '#3C3C3C', fontWeight: 'bold'}}>手机号</Text>
              <TouchableOpacity style={{flexDirection: 'row'}}>
                <Text style={{color: '#64646A'}}>{this.state.phone}</Text>
                <SvgXml height={20} xml={rightArrowIcon()} />
              </TouchableOpacity>
            </View>
          </WingBlank>
          <WingBlank>
            <View
              style={{
                justifyContent: 'space-between',
                alignItems: 'center',
                flexDirection: 'row',
              }}>
              <Text style={{color: '#3C3C3C', fontWeight: 'bold'}}>
                个人简介
              </Text>
              <TouchableOpacity
                style={{flexDirection: 'row', alignItems: 'center'}}
                onPress={() => {
                  this.props.navigation.navigate('change_profiles', {
                    data: this.state.profiles,
                    isRefresh: () => {
                      this.getUserInformation();
                    },
                  });
                }}>
                <Text
                  ellipsizeMode={'tail'}
                  numberOfLines={2}
                  style={{width: 200, color: '#64646A', textAlign: 'right'}}>
                  {this.state.profiles}
                </Text>
                <SvgXml height={20} xml={rightArrowIcon()} />
              </TouchableOpacity>
            </View>
          </WingBlank>
        </ScrollView>
        <WingBlank>
          <TouchableOpacity
            onPress={() => {
              this.loginOut();
            }}>
            <View
              style={{
                height: 50,
                borderRadius: 99,
                alignItems: 'center',
                justifyContent: 'center',
                borderWidth: 1,
                borderColor: '#CCCCCC',
              }}>
              <Text style={{color: '#64646A', fontSize: 16}}>退出登录</Text>
            </View>
          </TouchableOpacity>
        </WingBlank>
        <WhiteSpace />
      </SafeAreaView>
    );
  }

  //加载信息
  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) {
      const url = '/auth/comm/user/avatar/update';
      let response = await UploadImage(
        url,
        token,
        {
          mobile: account,
          reqChannel: 3,
        },
        image,
      );
      if (response) {
        if (response.code === 0) {
          await this.getUserInformation();
        }
      }
    }
  };

  //获取用户信息
  getUserInformation = async () => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      const url = '/auth/comm/user/personalInfo/find';
      let response = await RequestNetwork(
        url,
        token,
        {
          mobile: account,
        },
        false,
        2,
      );
      if (response) {
        console.log(response);
        if (response.code === 0) {
          let userHeadImg = {
            headImage: '',
            sex: 'M',
            nickName: '',
            companyName: '',
            profiles: '',
            address: '',
            phone: '',
            userName: '',
          };
          console.log(response);
          if (response.data !== null) {
            userHeadImg.headImage = response.data.avatar;
            userHeadImg.sex = response.data.sex;
            userHeadImg.nickName = response.data.nickName;
            userHeadImg.companyName = response.data.company;
            userHeadImg.profiles = response.data.personalProfile;
            userHeadImg.address = response.data.address;
            userHeadImg.phone = response.data.mobile;
            userHeadImg.userName = response.data.name;
          }
          await IndividualStorageData(
            'userHeadImg',
            JSON.stringify(userHeadImg),
          );
          await IndividualStorageData(
            'userInfo',
            JSON.stringify(response.data),
          );
          this.setState({
            nickName: userHeadImg.nickName,
            sex: userHeadImg.sex,
            companyName: userHeadImg.companyName,
            headImage: userHeadImg.headImage,
            profiles: userHeadImg.profiles,
            address: userHeadImg.address,
            phone: userHeadImg.phone,
            userName: userHeadImg.userName,
          });
          DeviceEventEmitter.emit('updateLoginInfo', true);
        }
      } else {
        ToastShow(1, '服务器故障!');
      }
    }
  };

  // 退出登录
  loginOut = () => {
    Alert.alert(
      '退出登录',
      '确定要退出登录吗！',
      [
        {
          text: '取消',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {text: '确定', onPress: () => this.cleanAll()},
      ],
      {cancelable: false},
    );
  };

  // 清空本地缓存
  cleanAll = async () => {
    await ClearAll();
    DeviceEventEmitter.emit('updateCompany');
    this.props.route.params.refresh(false);
    this.props.navigation.goBack();
  };
}