import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
  Share,
  Alert,
  TextInput,
  BackHandler
} from 'react-native';
var _ = require('lodash');
import { AnimatedCircularProgress } from 'react-native-circular-progress';
import CommonTextInput from '../../components/commonTextInput'
import Toast, { DURATION } from 'react-native-easy-toast';
import Switch from 'react-native-switch-pro';
import Modal from 'react-native-modal';
import { width, height } from '../../services/screen';
import { images } from '../../assets/images/imageIndex';
import AsyncStorage from '@react-native-community/async-storage';
import Loading from '../../components/Loading';
import { inject, observer } from 'mobx-react';
import { colors } from '../../assets/styles/colors-theme';
import Rank from '../../components/rank';
import TitleBar from '../../components/titleBar';
import CustomLoginButton from '../../components/customLoginButton';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import { observable } from 'mobx';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import FeatherIcon from 'react-native-vector-icons/dist/Feather';
import FontAwesomeIcon from 'react-native-vector-icons/dist/FontAwesome';
//import Adyen from 'adyen-react-native';
import Menu, {
  MenuProvider,
  MenuTrigger,
  MenuOptions,
  MenuOption,
  renderers,
} from 'react-native-popup-menu';
const { SlideInMenu } = renderers;
const langList = [
  { label: '繁體中文', value: 'hk' },
  { label: 'English', value: 'en' },
  { label: '簡體中文', value: 'zh' }
];
const API_KEY =
  //'AQEhhmfuXNWTK0Qc+iSem3Y3qfffgjkjOauoEZcB7q2DToV3EMFdWw2+5HzctViMSCJMYAc=-kpW/CqOWAmOBWEEhFHdHKKV/dcUBco7qbCGV+/U6KDE=-F?6e&d8kq%7)?D6H';
  'AQEkhmfuXNWTK0Qc+iSem3Y3qffCENhaJNh8FEMlEb7DNf3Ae1UzEMFdWw2+5HzctViMSCJMYAc=-SmX/AHu3xTVV2+Uek0ZHC2MxuW1df26lENMn6T4DVPw=-f3A?_6;kbd&pgK4g';
const MERCHANT_ACCOUNT =
  //'NironsECOM';
  'Nirons983ECOM';
FontAwesomeIcon.loadFont();
@inject('appStore')
@observer
export default class Profile extends React.Component {
  @observable notification = true;
  @observable lang = '中文';
  @observable editNameVisable = false
  @observable name = ''

  @observable
  data = [
    {
      title: 'name',
      icon: 'account',
      content: this.store.loginUserData.data.display_name,
      width1: 0.2,
      width2: 0.8,
    },
    {
      title: 'email',
      icon: 'email',
      content: this.store.loginUserData.data.email,
      width1: 0.2,
      width2: 0.8,
    },
    {
      title: 'mobilephone',
      icon: 'phone',
      content:
        this.store.loginUserData.data.country_code +
        ' ' +
        this.store.loginUserData.data.mobile,
      width1: 0.3,
      width2: 0.7,
    },
    {
      title: 'points',
      icon: 'gift',
      content: this.store.points,
      width1: 0.5,
      width2: 0.5,
    },
    {
      title: 'address',
      icon: 'store',
      content: this.addressReturn(),
      width1: 0.2,
      width2: 0.8,
    },
  ];
  constructor(props) {
    super(props);
    this.store = props.appStore;
    // Adyen.onRequestPaymentSession(this.onRequestPaymentSession);
    // Adyen.onPaymentResult((code, payload) =>{
    //   this.setState({status: 'success'}),
    //   console.log(code)
    //   console.log(payload)
    // }
    // );
    // Adyen.onError((code, error) => this.setState({status: 'failure'}));
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
    this.name = this.store.loginUserData.data.hasOwnProperty('member')
      ? this.store.loginUserData.data.member.name
      : this.store.loginUserData.data.name
  }

  // onRequestPaymentSession(token, returnUrl) {
  //   console.log(token, returnUrl);
  //   fetch('https://checkout-test.adyen.com/v41/paymentSession', {
  //     method: 'POST',
  //     headers: {
  //       'Content-Type': 'application/json',
  //       'x-API-key': API_KEY,
  //     },
  //     body: JSON.stringify({
  //       amount: {
  //         value: 1747,
  //         currency: 'HKD',
  //       },
  //       reference: 'Test payments',
  //       countryCode: 'HK',
  //       shopperReference: 'demo@demo.com',
  //       returnUrl: 'return-url://',
  //       token,
  //       merchantAccount: MERCHANT_ACCOUNT,
  //     }),
  //   })
  //     .then(response => response.json())
  //     .then(responseData => Adyen.confirmPayment(responseData.paymentSession))
  //     .done();
  // }

  async selectLangAction(value) {
    console.log(value);
    this.store.changeLanguage(value.value);
    this.lang = value.label;
    try {
      await AsyncStorage.setItem('lang', value.value);
    } catch (e) {
      // saving error
    }
  }

  async getuserData() {
    var data = await this.store.getLocalData('logindata');
    if (data != null) {
      var userloginData = {
        token: data.token,
        device: data.device,
      };
      // this.store.userData = userloginData;
      console.log(data);
      this.store.token = data.token;
      this.store.uuid = data.device;
      await this.store.getUserData(this, userloginData, false);
    }
  }

  async componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
    await this.store.getPoints();
    this.data[0].content = this.store.loginUserData.data.display_name;
    this.data[1].content = this.store.loginUserData.data.email;
    this.data[2].content =
      this.store.loginUserData.data.country_code +
      ' ' +
      this.store.loginUserData.data.mobile;
    this.data[4].content = this.addressReturn();
    try {
      const value = await AsyncStorage.getItem('lang');
      if (value !== null) {
        console.log(value);
        if (value == 'hk') {
          this.lang = '中文';
        } else {
          this.lang = 'English';
        }
      } else {
        this.lang = '中文';
      }
    } catch (e) {
      // error reading value
    }
  }
  componentDidMount() {
    this._unsubscribe = this.props.navigation.addListener('focus', () => {
      this.getuserData();
    });
  }
  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
    this._unsubscribe();
  }
  handleBackButtonClick() {
    this.props.navigation.navigate('Main');
    return true
  }

  addressReturn() {
    // if (this.store.loginUserData.data.shipping.address_1 != '') {
    //   return (
    //     this.store.loginUserData.data.shipping.address_1 +
    //     ', ' +
    //     this.store.loginUserData.data.shipping.address_2
    //   );
    // } else {
    //return this.store.text.clickHereToEnterTheAddress;
    //}
    if (this.store.addresses.length > 0) {
      return (
        this.store.addresses[0].region.name +
        ', ' +
        this.store.addresses[0].district.name +
        ', ' +
        this.store.addresses[0].address
      );
    } else {
      return this.store.text.clickHereToEnterTheAddress;
    }
  }

  userDataClickAction(index) {
    switch (index) {
      case 0:
        this.props.navigation.navigate('AddName');
        break;
      case 4:
        this.props.navigation.navigate('AddressSetting');
        break;
      case 2:
        if (this.store.loginUserData.data.mobile == null) {
          this.props.navigation.navigate('SignUpVerify', {
            data: {
              first_name: '',
              last_name: '',
              welcome_code: '',
              country_code: '+852',
              mobile: '',
              email: '',
              ver_code: '',
              password: '',
            },
            addMobile: true,
          });
        } else {
        }
        break;
    }
  }

  titleStringReturn(title) {
    switch (title) {
      case 'name':
        return this.store.text.name;
        break;
      case 'email':
        return this.store.text.email;
        break;
      case 'mobilephone':
        return this.store.text.mobilephone;
        break;
      case 'points':
        return this.store.text.points;
        break;
      case 'address':
        return this.store.text.address;
        break;
    }
  }


  renderUserDetailList(data, index) {
    return (
      <TouchableOpacity
        onPress={() => this.userDataClickAction(index)}
        style={{
          flexDirection: 'row',
          height: 40,
          width: width - 40,
          borderBottomColor: colors.lineColor,
          borderBottomWidth: 1,
        }}>
        <View
          style={{
            flex: data.width1,
            alignItems: 'center',
            flexDirection: 'row',
          }}>
          <Icon
            style={{ marginLeft: 10 }}
            color={colors.mainColor}
            name={data.icon}
            size={25}
          />
          <Text style={{ color: colors.mainColor, marginLeft: 10 }}>
            {this.titleStringReturn(data.title)}
          </Text>
        </View>
        <View
          style={{
            flex: data.width2,
            justifyContent: 'center',
            alignItems: 'flex-end',
          }}>
          <Text
            style={{
              color: colors.inputText,
              marginRight: 10,
              fontWeight: 'bold',
            }}>
            {this.contentReturn(index, data)}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }

  contentReturn(index, data) {
    // if (index == 4) {
    //   return this.addressReturn();
    // } else if (index == 3) {
    //   return this.store.points;
    // } else {
    //   return data.content;
    // }
    switch (index) {
      case 0:
        if (this.store.loginUserData.data.display_name == '') {
          return this.store.text.clickHereToEnterYourName;
        } else {
          return this.store.loginUserData.data.display_name;
        }
        break;

      case 1:
        return this.store.loginUserData.data.email;
        break;
      case 2:
        if (this.store.loginUserData.data.country_code == null) {
          return this.store.text.clickHereToEnterYourMobile;
        } else {
          return (
            this.store.loginUserData.data.country_code +
            ' ' +
            this.store.loginUserData.data.mobile
          );
        }

        break;
      case 3:
        return this.store.points;
        break;
      case 4:
        return this.addressReturn();
        break;
    }
  }

  accessShoppingGroup() {
    if (this.store.loginUserData.data.hasOwnProperty('shoppingGroup')) {
      this.store.getOwnShoppingGroup(this, false, false);
    } else {
      this.refs.toast.show(this.store.text.pleaseJoinShoppingGroup);
    }
  }

  editNameAction() {
    const name = this.store.loginUserData.data.hasOwnProperty('member')
      ? this.store.loginUserData.data.member.name
      : this.store.loginUserData.data.name

    if (this.name === name) {
      this.editNameVisable = false
    } else {
      if (this.name != '') {
        this.store.editUserName(this.name, this)
      } else {
        this.refs.toast.show(this.store.text.pleaseInputFirstName)
      }
    }
  }

  pointHandler(points, which) {
    var int_part = Math.trunc(points);

    if (which) {
      return int_part
    } else {
      console.log(Number((points - int_part).toFixed(2)))
      return Number((points - int_part).toFixed(2));
    }
  }

  render() {
    return (
      <MenuProvider
        style={{
          flex: 1,
          backgroundColor: colors.bgc,
        }}>
        <Loading loading={this.store.loading} />
        <View
          style={{
            height: Platform.OS === 'ios' ? 45 : 70,
            marginTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(),
            width: width,
            alignItems: 'center',
            backgroundColor: 'white',
            flexDirection: 'row',
          }}>
          <TouchableOpacity style={{ flex: 1, alignItems: 'center', flexDirection: 'row' }}
            onPress={() => { this.editNameVisable = true }}>
            <View style={{ marginHorizontal: 10 }}>

              <Icon name='pencil' size={20} />
            </View>

            <Text
              style={{
                fontSize: 18,
                fontWeight: '500',

                color: 'black',
                width: width / 2 - 70
              }}>
              {this.store.loginUserData.data.hasOwnProperty('member')
                ? this.store.loginUserData.data.member.name
                : this.store.loginUserData.data.name}

            </Text>

          </TouchableOpacity>
          <View style={{ flex: 1, alignItems: 'flex-end' }}>
            <TouchableOpacity
              onPress={() => {
                this.props.navigation.navigate('Setting');
              }}>
              <Icon name="cog-outline" size={30} style={{ marginRight: 20 }} />
            </TouchableOpacity>
          </View>
        </View>
        <ScrollView>
          <View
            style={{
              width: width,
              justifyContent: 'center',
              alignItems: 'center',
              marginTop: 20,
            }}>

            <View style={{ justifyContent: 'center', alignItems: 'center' }}>
              <AnimatedCircularProgress
                size={130}
                width={15}
                fill={this.store.loginUserData.data.hasOwnProperty('member')
                  ? this.pointHandler(this.store.loginUserData.data.member.points, false) * 100
                  : this.pointHandler(this.store.loginUserData.data.points, false) * 100}
                tintColor={colors.mainColor}
                onAnimationComplete={() => console.log('onAnimationComplete')}
                backgroundColor={colors.line2Color} />
              <View style={{ position: 'absolute', justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ fontSize: 25, fontWeight: '800' }}>
                  {this.store.loginUserData.data.hasOwnProperty('member')
                    ? this.pointHandler(this.store.loginUserData.data.member.points, true)
                    : this.pointHandler(this.store.loginUserData.data.points, true)}
                </Text>
                <Text
                  style={{ color: colors.labelColor, fontSize: 12, marginTop: 3 }}>
                  {this.store.text.countPoints}
                </Text>
              </View>
            </View>


            {/* <TouchableOpacity
              style={{
                width: 110,
                height: 30,
                borderRadius: 30,
                marginTop: 20,
                backgroundColor: colors.shoppingGroupColor,
                justifyContent: 'center',
                alignItems: 'center',
                flexDirection: 'row',
              }}>
              <Icon name="ticket-percent-outline" size={25} />
              <Text style={{marginLeft: 5, fontSize: 14, fontWeight: '700'}}>
                {this.store.text.pointsChangeGift}
              </Text>
            </TouchableOpacity> */}

            <TouchableOpacity
              onPress={() => {
                this.accessShoppingGroup();
              }}
              style={{
                flexDirection: 'row',
                height: 50,
                marginTop: 20,
                width: width,
                borderBottomColor: colors.lineColor,
                borderTopColor: colors.lineColor,
                borderBottomWidth: 1,
                borderTopWidth: 1,
              }}>
              <View
                style={{
                  flex: 0.8,
                  alignItems: 'center',
                  flexDirection: 'row',
                }}>
                <Icon
                  name="account-group-outline"
                  size={20}
                  style={{ marginLeft: 20 }}
                />
                <Text style={{ marginLeft: 10, fontWeight: '800' }}>
                  {this.store.text.shoppingGroup}
                </Text>
              </View>
              <View
                style={{
                  flex: 0.2,
                  justifyContent: 'center',
                  alignItems: 'flex-end',
                }}>
                <Icon
                  name="chevron-right"
                  size={30}
                  style={{ marginRight: 20 }}
                />
              </View>
            </TouchableOpacity>
            <View style={{ height: 50, width: width, flexDirection: 'row' }}>
              <View style={{ flex: 1, justifyContent: 'center' }}>
                <Text style={{ marginLeft: 20, fontWeight: '800' }}>
                  {this.store.text.shippingAddress}
                </Text>
              </View>
              <View
                style={{
                  flex: 1,
                  alignItems: 'flex-end',
                  justifyContent: 'center',
                }}>
                <TouchableOpacity
                  style={{ marginRight: 20 }}
                  onPress={() => {
                    this.props.navigation.navigate('AddressSetting');
                  }}>
                  <Text style={{ color: colors.mainColor }}>
                    {this.store.text.edit}
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
            <View style={{ marginTop: 15, width: width, flexDirection: 'row' }}>
              <View style={{ flex: 0.4 }}>
                <Text
                  style={{
                    fontSize: 11,
                    color: colors.labelColor,
                    marginLeft: 20,
                  }}>
                  {this.store.text.TheRecipientName}
                </Text>
                <Text
                  style={{
                    fontSize: 11,
                    marginLeft: 20,
                    marginTop: 5,
                  }}>
                  {this.store.addresses.length > 0
                    ? this.store.addresses[0].receiver
                    : '--'}
                </Text>
              </View>
              <View style={{ flex: 0.6 }}>
                <Text
                  style={{
                    fontSize: 11,
                    color: colors.labelColor,
                    marginLeft: 20,
                  }}>
                  {this.store.text.TheRecipientPhone}
                </Text>
                <Text
                  style={{
                    fontSize: 11,
                    marginLeft: 20,
                    marginTop: 5,
                  }}>
                  {this.store.addresses.length > 0
                    ? this.store.addresses[0].mobile
                    : '--'}
                </Text>
              </View>
            </View>
            <View style={{ marginTop: 20, width: width }}>
              <Text
                style={{
                  fontSize: 11,
                  color: colors.labelColor,
                  marginLeft: 20,
                }}>
                {this.store.text.address}
              </Text>
              <Text
                style={{
                  fontSize: 11,
                  marginLeft: 20,
                  marginTop: 5,
                }}>
                {this.store.addresses.length > 0
                  ? this.store.addresses[0].region.name +
                  ', ' +
                  this.store.addresses[0].district.name +
                  ', ' +
                  this.store.addresses[0].addr
                  : '--'}
              </Text>
            </View>
            <View
              style={{
                height: 1,
                width: width - 40,
                backgroundColor: colors.lineColor,
                marginTop: 20,
              }}
            />

            <View style={{ height: 50, width: width, flexDirection: 'row' }}>
              <View style={{ flex: 1, justifyContent: 'center' }}>
                <Text style={{ marginLeft: 20, fontWeight: '800' }}>
                  {this.store.text.creditCardInfo}
                </Text>
              </View>
              <View
                style={{
                  flex: 1,
                  alignItems: 'flex-end',
                  justifyContent: 'center',
                }}>
                <TouchableOpacity
                  style={{ marginRight: 20 }}
                  onPress={() => {
                    this.props.navigation.navigate('CreditCard');
                  }}>
                  <Text style={{ color: colors.mainColor }}>
                    {this.store.text.edit}
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
            <View style={{ width: width }}>
              <Text
                style={{
                  fontSize: 11,
                  marginLeft: 20,
                }}>
                {this.store.creditCardinfo != null
                  ? this.store.creditCardinfo.number
                  : '--'}
              </Text>
            </View>
          </View>

          {/* <View style = {{width:150,height:150,justifyContent: 'center',alignItems:'center'}}>
            <Image style = {{height:100,width:100,position: 'absolute',}} source = {images.signIn.facebook}/>
            <Image style = {{height:100,width:100,position: 'absolute',}} source = {images.signIn.google}/>
          </View> */}

          {/* <View
            style={{
              width: width,
              backgroundColor: colors.signupInputBgc,
              marginTop: 20,
            }}>
            <View
              style={{
                marginLeft: 20,
                marginRight: 20,
                backgroundColor: colors.signupInputBgc,
              }}>
              {this.data.map((items, index) => {
                return this.renderUserDetailList(items, index);
              })}
            </View>
          </View> */}

          {/* <View style={{marginLeft: 20, marginRight: 20}}>
            <Menu
              name="lang"
              renderer={SlideInMenu}
              onSelect={value => {
                this.selectLangAction(value);
              }}>
              <MenuTrigger
                //disabled={!this.editable}
                style={{flexDirection: 'row', marginBottom: 5}}
                style={{
                  flexDirection: 'row',
                  height: 40,
                  width: width - 40,
                  borderBottomColor: colors.lineColor,
                  borderBottomWidth: 1,
                }}>
                <View style={{flex: 0.5, justifyContent: 'center'}}>
                  <Text style={{color: colors.mainColor, marginLeft: 10}}>
                    {this.store.text.language}
                  </Text>
                </View>
                <View
                  style={{
                    flex: 0.5,
                    justifyContent: 'center',
                    alignItems: 'flex-end',
                  }}>
                  <Text
                    style={{
                      color: colors.mainColor,
                      marginRight: 10,
                      fontWeight: 'bold',
                    }}>
                    {this.lang}
                  </Text>
                </View>
              </MenuTrigger>
              <MenuOptions
                customStyles={{
                  optionText: {
                    margin: 5,
                    color: 'white',
                    fontSize: 15,
                  },
                  optionWrapper: {
                    backgroundColor: colors.mainColor,
                    alignItems: 'center',
                  },
                }}>
                {langList.map((obj, i) => {
                  return <MenuOption value={obj} text={obj.label} />;
                })}
              </MenuOptions>
            </Menu>

            <View
              style={{
                flexDirection: 'row',
                height: 40,
                width: width - 40,
                borderBottomColor: colors.lineColor,
                borderBottomWidth: 1,
              }}>
              <View style={{flex: 0.5, justifyContent: 'center'}}>
                <Text style={{color: colors.mainColor, marginLeft: 10}}>
                  {this.store.text.notification}
                </Text>
              </View>
              <View
                style={{
                  flex: 0.5,
                  justifyContent: 'center',
                  alignItems: 'flex-end',
                }}>
                <Switch
                  value={this.notification}
                  backgroundActive={colors.mainColor}
                  onSyncPress={value => {
                    (this.notification = value),
                      console.log(value + '   ' + this.notification);
                  }}
                />
              </View>
            </View>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('CreditCard')}
              style={{
                flexDirection: 'row',
                height: 40,
                width: width - 40,
                borderBottomColor: colors.lineColor,
                borderBottomWidth: 1,
              }}>
              <View style={{flex: 0.5, justifyContent: 'center'}}>
                <Text style={{color: colors.mainColor, marginLeft: 10}}>
                  {this.store.text.creditCardInfo}
                </Text>
              </View>
              <View
                style={{
                  flex: 0.5,
                  justifyContent: 'center',
                  alignItems: 'flex-end',
                }}>
              
                <Icon
                  name="credit-card-multiple"
                  color={colors.mainColor}
                  size={35}
                />
              </View>
            </TouchableOpacity>
            <View
              style={{
                flexDirection: 'row',
                height: 40,
                width: width - 40,
                borderBottomColor: colors.lineColor,
                borderBottomWidth: 1,
              }}>
              <TouchableOpacity
                onPress={() => {
                  this.share();
                }}
                style={{flex: 0.5, justifyContent: 'center'}}>
                <Text style={{color: colors.mainColor, marginLeft: 10}}>
                  {this.store.text.share}
                </Text>
              </TouchableOpacity>
              <View
                style={{
                  flex: 0.5,
                  justifyContent: 'center',
                  alignItems: 'flex-end',
                }}>
                <Image
                  source={images.profile.profileShare}
                  tintColor={colors.mainColor}
                />
              </View>
            </View>
            <TouchableOpacity
              style={{marginTop: 10}}
              onPress={() => {
                if (this.store.loginUserData.data.mobile != null) {
                  this.props.navigation.navigate('ForgotPassword');
                } else {
                  Alert.alert('', '請先加入電話號碼', [
                    {text: '取消', onPress: () => console.log('Cancel')},
                    {
                      text: '加入',
                      onPress: () => {
                        this.props.navigation.navigate('SignUpVerify', {
                          data: {
                            first_name: '',
                            last_name: '',
                            welcome_code: '',
                            country_code: '+852',
                            mobile: '',
                            email: '',
                            ver_code: '',
                            password: '',
                          },
                          addMobile: true,
                        });
                      },
                    },
                  ]);
                }
              }}>
              <Text style={{marginLeft: 10, fontSize: 11}}>
                {this.store.text.forgotPassword}
              </Text>
            </TouchableOpacity>
          </View> */}
          <View
            style={{
              width: width,
              alignItems: 'center',
              marginTop: 20,
              marginBottom: 20,
            }}>
            {/* <CustomLoginButton
              title="Logout"
              color={colors.profileBg}
              textColor={colors.inputText}
              onPress={() => {
                this.store.logoutPost(this);
              }}
            /> */}
          </View>
        </ScrollView>
        <Modal isVisible={this.editNameVisable}
          onBackdropPress={() => this.editNameVisable = false}
          deviceWidth={width}
          deviceHeight={height}>
          <View style={{ height: 200, backgroundColor: 'white', borderRadius: 20, alignItems: 'center', justifyContent: 'center', }}>

            <View style={styles.inputTextView}>

              {/* <CommonTextInput value={this.name} onChangeText={text => (this.name = text)}/> */}
              <TextInput
                style={{
                  fontSize: 15,
                  color: 'black',
                  paddingBottom: 0,
                  marginTop: Platform.OS == 'IOS' ? 10 : 0,
                }}
                value={this.name}
                onChangeText={text => (this.name = text)}
              />


              <View style={{ marginTop: 20 }} />
            </View>

            <CustomLoginButton title={this.store.text.editName} onPress={() => { this.editNameAction() }} />
          </View>
        </Modal>
        <Toast
          ref="toast"
          style={{ backgroundColor: colors.mainColor }}
          position="bottom"
          positionValue={200}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{ color: 'white' }}
        />
      </MenuProvider >
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'white',
  },

  button: {
    marginTop: 20,
    width: width,
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.statusBarColor,
  },
  inputTextView: {
    width: 250,
    marginTop: 20,
    borderBottomWidth: 1,
    borderBottomColor: colors.line2Color,
    height: 30,
  },
  inputTextTitleView: {
    fontSize: 14,
    color: colors.line2Color,
  },
  title: {
    fontSize: 17,
    marginTop: 20,
  },
  subtitle: {
    fontSize: 14,
  },
  buttonText: {
    color: '#fff',
  },
  picker: {
    fontSize: 20,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  textView: {
    color: colors.mainColor,

    fontSize: 20,
    fontWeight: 'bold',
  },
});
const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'black',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
});
