import Button from 'apsl-react-native-button';
import _ from 'lodash';
import React, {Component} from 'react';
import {
  ActivityIndicator,
  Alert,
  BackHandler,
  Platform,
  ProgressBarAndroid,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import I18n from 'react-native-i18n';
import {Dropdown} from 'react-native-material-dropdown-v2';
import {
  responsiveHeight,
  responsiveWidth,
} from 'react-native-responsive-dimensions';
import {Fumi} from 'react-native-textinput-effects';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {supervisorCode} from '../../webservice/IlinkConstants';
import {getData, storeData} from '../../webservice/persistences/StorageService';
import {
  categoryChild,
  getCodeInformation,
  getSupervisorInfoCode,
} from './../../webservice/AuthApi';

let theme = require('./../../utils/theme.json');
let route = require('./../../route.json');

const CIVILITY_DATA = [
  {label: 'Monsieur', value: 1},
  {label: 'Madame', value: 2},
  {label: 'Mademoiselle', value: 3},
];

const NATIONALITY_DATA = [{label: 'Cameroun', value: 1}];

export default class CreateAccount extends Component {
  static navigatorStyle = {
    drawUnderNavBar: true,
    navBarHidden: true,
    drawUnderStatusBar: false,
    statusBarHidden: true,
    statusBarTextColorScheme: 'light',
  };

  static options(passProps) {
    return {
      topBar: {
        visible: false,
        enabled: false,
        drawBehind: true,
      },
      statusBar: {
        drawBehind: true,
        enabled: false,
      },
    };
  }

  constructor(props) {
    super(props);
    const {navigation} = this.props;
    this.type = navigation.getParam('type', 0);
    this.state = this.initState();
  }

  initState() {
    return {
      password: null,
      enterPhone: null,
      nationalityAnim: null,
      civiliteAnim: null,
      nameanim: null,
      surnameanim: null,
      passwordanim: null,
      confirmpassanim: null,
      isLoging: false,
      snackVisible: false,
      snackText: '',
      user: {category: this.type === 0 ? 'user' : 'geolocated'},
      displayFirstStep: true,
      displaySecondStep: false,
      showAlertIfIsOffline: this.type === 1,
      isRegisterOffline: false,
      displayLoader: false,
      codeSupervisorsData: null,
      codeSupervisorData: null,
    };
  }

  componentDidMount() {
    if (this.state.showAlertIfIsOffline) {
      Alert.alert(
        I18n.t('REGISTER_OPTIONS'),
        I18n.t('WOULD_YOU_WANT_TO_REGISTER_OFFLINE'),
        [
          {
            text: I18n.t('YES'),
            onPress: () => {
              this.setState({showAlertIfIsOffline: false});
            },
          },
          {
            text: I18n.t('NO'),
            onPress: () => {
              this.setState({
                isRegisterOffline: true,
                showAlertIfIsOffline: false,
              });
            },
          },
        ],
        {cancelable: false},
      );
    }
  }

  renderCodeParrainField() {
    return (
      <ScrollView style={styles.container}>
        {this.state.displayLoader && this.renderLoader()}
        <View style={{flexDirection: 'row'}}>
          <Icon.Button
            name={'keyboard-backspace'}
            color={'white'}
            size={24}
            backgroundColor={'transparent'}
            onPress={() => this.props.navigation.pop()}
          />
          <Text style={styles.bigtitle}>
            {I18n.t('TEXT_BIG_CREATE_AGENT_1')}
          </Text>
        </View>
        <Text style={styles.subbigtitle}>{I18n.t('ENTER_SPONSOR_CODE')}</Text>

        <Animatable.View
          ref={comp => {
            this.memberanim = comp;
          }}>
          <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'unlock-alt'}
            label={I18n.t('CODE_PARRAIN')}
            iconColor={'#f95a25'}
            onChangeText={text => {
              let use = this.state.user;
              use.member = text;
              this.setState({user: use});
            }}
            iconSize={20}
            style={styles.input}></Fumi>
        </Animatable.View>

        <Button
          style={styles.btnvalide}
          textStyle={styles.textbtnvalide}
          isLoading={this.state.isLoging}
          onPress={() => {
            this.checkCodeParrain();
          }}>
          {I18n.t('NEXT')}
        </Button>
        <View style={{display: 'flex', flexDirection: 'column'}}>
          <Text style={styles.indication}>
            <Text style={styles.indicationTitle}>
              {I18n.t('HIERACHIC_CODE')} :
            </Text>{' '}
            {I18n.t('HIERACHIC_CODE_DESCRIPTION')}
          </Text>
          <Text style={styles.indication}>
            <Text style={styles.indicationTitle}>{I18n.t('TAX_CODE')} :</Text>{' '}
            {I18n.t('TAX_CODE_DESCRIPTION')}
          </Text>
        </View>
      </ScrollView>
    );
  }

  renderUserGeoAccount() {
    return (
      <ScrollView style={styles.container}>
        <View style={{flexDirection: 'row'}}>
          <Icon.Button
            name={'keyboard-backspace'}
            color={'white'}
            size={24}
            backgroundColor={'transparent'}
            onPress={() => this.props.navigation.pop()}
          />
          <Text style={styles.bigtitle}>
            {I18n.t('TEXT_BIG_CREATE_AGENT_1')}
          </Text>
        </View>
        <Text style={styles.subbigtitle}>
          {I18n.t('TEXT_SUBTITLE_CREATE_1')}
        </Text>
        {/* Champs Civilité */}
        <Animatable.View
          ref={comp => {
            this.civiliteAnim = comp;
          }}>
          <Dropdown
            label={I18n.t('CIVILITY')}
            style={styles.dropdown}
            data={CIVILITY_DATA}
            valueExtractor={(item, index) => item.value}
            labelExtractor={(item, index) => item.label}
            onChangeText={(value, index, data) => {
              let user = this.state.user;
              user.civility_id = value;
              this.setState({user});
            }}
          />
        </Animatable.View>

        {/* Champs Nationalité */}
        <Animatable.View
          ref={comp => {
            this.nationalityAnim = comp;
          }}>
          <Dropdown
            label={I18n.t('NATIONALITY')}
            style={styles.dropdown}
            data={NATIONALITY_DATA}
            valueExtractor={(item, index) => item.value}
            labelExtractor={(item, index) => item.label}
            onChangeText={(value, index, data) => {
              let user = this.state.user;
              user.nationalty_id = value;
              this.setState({user});
            }}
          />
        </Animatable.View>

        <Animatable.View
          ref={comp => {
            this.nameanim = comp;
          }}>
          <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'user'}
            label={I18n.t('NAME')}
            iconColor={'#f95a25'}
            iconSize={20}
            onChangeText={text => {
              let use = this.state.user;
              use.lastname = text;
              this.setState({user: use});
            }}
            value={this.state.user.lastname}
            style={styles.input}></Fumi>
        </Animatable.View>

        <Animatable.View
          ref={comp => {
            this.surnameanim = comp;
          }}>
          <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'user-md'}
            label={I18n.t('ADDRESS')}
            iconColor={'#f95a25'}
            iconSize={20}
            keyboardType={'email-address'}
            style={styles.input}
            value={this.state.user.address}
            onChangeText={text => {
              let use = this.state.user;
              use.address = text;
              this.setState({user: use});
            }}></Fumi>
        </Animatable.View>
        <Animatable.View
          ref={comp => {
            this.mailanim = comp;
          }}>
          <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'envelope'}
            label={I18n.t('EMAIL')}
            keyboardType={'email-address'}
            iconColor={'#f95a25'}
            iconSize={20}
            onChangeText={text => {
              let use = this.state.user;
              use.email = text;
              this.setState({user: use});
            }}
            style={styles.input}></Fumi>
        </Animatable.View>
        <Animatable.View
          ref={comp => {
            this.passanim = comp;
          }}>
          <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'lock'}
            label={I18n.t('PASSWORD')}
            iconColor={'#f95a25'}
            secureTextEntry={true}
            onChangeText={text => {
              let use = this.state.user;
              use.password = text;
              this.setState({user: use});
            }}
            iconSize={20}
            style={styles.input}></Fumi>
        </Animatable.View>
        <Animatable.View
          ref={comp => {
            this.confirmanim = comp;
          }}>
          <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'lock'}
            secureTextEntry={true}
            label={I18n.t('CONFIRM_PASSWORD')}
            iconColor={'#f95a25'}
            onChangeText={text => {
              let use = this.state.user;
              use.confirmpass = text;
              this.setState({user: use});
            }}
            iconSize={20}
            style={styles.input}></Fumi>
        </Animatable.View>
        <Button
          style={styles.btnvalide}
          textStyle={styles.textbtnvalide}
          isLoading={this.state.isLoging}
          onPress={() => {
            this.checkUserGeolocated();
          }}>
          {I18n.t('NEXT')}
        </Button>
      </ScrollView>
    );
  }

  renderUserAccount() {
    return (
      <ScrollView style={styles.container}>
        <View style={{flexDirection: 'row'}}>
          <Icon.Button
            name={'keyboard-backspace'}
            color={'white'}
            size={24}
            backgroundColor={'transparent'}
            onPress={() => this.props.navigation.pop()}
          />
          <Text style={styles.bigtitle}>{I18n.t('TEXT_BIG_CREATE_1')}</Text>
        </View>
        <Text style={styles.subbigtitle}>
          {I18n.t('TEXT_SUBTITLE_CREATE_1')}
        </Text>

        <Animatable.View
          ref={comp => {
            this.civiliteAnim = comp;
          }}>
          <Dropdown
            label={I18n.t('CIVILITY')}
            style={styles.dropdown}
            data={CIVILITY_DATA}
            // On renvoie la valeur (ex: 1, 2, 3)
            valueExtractor={(item, index) => item.value}
            // On affiche le label dans la liste (ex: Monsieur, Madame, ...)
            labelExtractor={(item, index) => item.label}
            onChangeText={(value, index, data) => {
              let user = this.state.user;
              user.civility_id = value; // <=== on stocke en integer
              this.setState({user});
            }}
          />
        </Animatable.View>

        <Animatable.View
          ref={comp => {
            this.nationalityAnim = comp;
          }}>
          <Dropdown
            label={I18n.t('NATIONALITY')}
            style={styles.dropdown}
            data={NATIONALITY_DATA}
            valueExtractor={(item, index) => item.value}
            labelExtractor={(item, index) => item.label}
            onChangeText={(value, index, data) => {
              let user = this.state.user;
              user.nationalty_id = value; // <=== on stocke en integer
              this.setState({user});
            }}
          />
        </Animatable.View>
        <Animatable.View
          ref={comp => {
            this.nameanim = comp;
          }}>
          <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'user'}
            label={I18n.t('NAME')}
            onChangeText={text => {
              let use = this.state.user;
              use.lastname = text;
              this.setState({user: use});
            }}
            iconColor={'#f95a25'}
            iconSize={20}
            style={styles.input}></Fumi>
        </Animatable.View>
        <Animatable.View
          ref={comp => {
            this.surnameanim = comp;
          }}>
          <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'user-md'}
            label={I18n.t('ADDRESS')}
            iconColor={'#f95a25'}
            iconSize={20}
            keyboardType={'email-address'}
            onChangeText={text => {
              let use = this.state.user;
              use.address = text;
              this.setState({user: use});
            }}
            style={styles.input}></Fumi>
        </Animatable.View>
        <Animatable.View
          ref={comp => {
            this.mailanim = comp;
          }}>
          <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'envelope'}
            keyboardType={'email-address'}
            label={I18n.t('EMAIL')}
            iconColor={'#f95a25'}
            iconSize={20}
            onChangeText={text => {
              let use = this.state.user;
              use.email = text;
              this.setState({user: use});
            }}
            style={styles.input}></Fumi>
        </Animatable.View>
        <Animatable.View
          ref={comp => {
            this.passanim = comp;
          }}>
          <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'lock'}
            label={I18n.t('PASSWORD')}
            iconColor={'#f95a25'}
            iconSize={20}
            secureTextEntry={true}
            onChangeText={text => {
              let use = this.state.user;
              use.password = text;
              this.setState({user: use});
            }}
            style={styles.input}></Fumi>
        </Animatable.View>
        <Animatable.View
          ref={comp => {
            this.confirmanim = comp;
          }}>
          <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'lock'}
            secureTextEntry={true}
            label={I18n.t('CONFIRM_PASSWORD')}
            iconColor={'#f95a25'}
            iconSize={20}
            onChangeText={text => {
              let use = this.state.user;
              use.confirmpass = text;
              this.setState({user: use});
            }}
            style={styles.input}></Fumi>
        </Animatable.View>

        <Button
          style={styles.btnvalide}
          textStyle={styles.textbtnvalide}
          onPress={() => {
            this._onUserCreateAccount();
          }}>
          {I18n.t('NEXT')}
        </Button>
      </ScrollView>
    );
  }

  async _onUserCreateAccount() {
    let {user} = this.state;
    console.log('user=======>>>>>>', user);
    if (user !== undefined) {
      if (this.checkOrShake(user.civility_id, this.civiliteAnim)) {
        // Vérification Nationalité
        if (this.checkOrShake(user.nationalty_id, this.nationalityAnim)) {
          if (this.checkOrShake(user.lastname, this.nameanim)) {
            if (this.checkOrShake(user.address, this.surnameanim)) {
              if (this.checkOrShake(user.email, this.mailanim)) {
                if (this.checkOrShake(user.password, this.passanim)) {
                  if (this.checkOrShake(user.confirmpass, this.confirmanim)) {
                    if (user.confirmpass === user.password) {
                      this.props.navigation.push(route.creationstep2, {
                        type: this.type,
                        user: user,
                      });
                    } else {
                      this.passanim.shake(800);
                      this.confirmanim.shake(800);
                    }
                  }
                }
              }
            }
          }
        }
      }
    } else {
      /*this.props.navigator.showSnackbar({
                text:"impossible de trouvé l'utilisateur"
            })
            console.log(user)
        */
    }
  }

  checkUserGeolocated() {
    let {user} = this.state;
    // console.log("user=======>>>>>>",user)
    // console.log("user=======>>>>>>",user.civility_id)
    // console.log("user=======>>>>>>",user.civility_id.length)
    this.setState({isLoging: true});
    if (user !== undefined) {
      if (this.checkOrShake(user.civility_id, this.civiliteAnim)) {
        if (this.checkOrShake(user.nationalty_id, this.nationalityAnim)) {
          if (this.checkOrShake(user.lastname, this.nameanim)) {
            if (this.checkOrShake(user.address, this.surnameanim)) {
              if (this.checkOrShake(user.email, this.mailanim)) {
                if (this.state.isRegisterOffline) {
                  if (!_.isNil(this.state.codeSupervisorData)) {
                    this.setState({isLoging: false});
                    if (this.state.codeSupervisorData.child !== undefined) {
                      let user = this.state.user;
                      user.category = this.state.codeSupervisorData.child;
                      this.setState({user: user});
                    }

                    if (this.checkOrShake(user.password, this.passanim)) {
                      if (
                        this.checkOrShake(user.confirmpass, this.confirmanim)
                      ) {
                        if (user.password === user.confirmpass) {
                          this.props.navigation.push(route.creationstep2, {
                            type: this.type,
                            user: user,
                            isOffline: this.state.isRegisterOffline,
                            result: this.state.codeSupervisorData,
                          });
                        } else {
                          this.passanim.shake(800);
                          this.confirmanim.shake(800);
                          this.setState({isLoging: false});
                        }
                      } else {
                        this.setState({isLoging: false});
                      }
                    } else this.setState({isLoging: false});
                  }
                } else {
                  categoryChild(user.member)
                    .then(async codes => {
                      // console.log("CATEGORY", codes);
                      if (
                        codes !== undefined &&
                        codes !== null &&
                        codes.child !== undefined
                      ) {
                        let user = this.state.user;
                        user.category = codes.child;
                        this.setState({user: user});
                      }
                      this.setState({isLoging: false});
                      if (this.checkOrShake(user.password, this.passanim)) {
                        if (
                          this.checkOrShake(user.confirmpass, this.confirmanim)
                        ) {
                          if (user.password === user.confirmpass) {
                            this.props.navigation.push(route.creationstep2, {
                              type: this.type,
                              user: user,
                              isOffline: this.state.isRegisterOffline,
                            });
                          } else {
                            this.passanim.shake(800);
                            this.confirmanim.shake(800);
                            this.setState({isLoging: false});
                          }
                        } else {
                          this.setState({isLoging: false});
                        }
                      } else this.setState({isLoging: false});
                    })
                    .catch(e => {
                      this.setState({isLoging: false});
                    });
                }
              } else this.setState({isLoging: false});
            } else this.setState({isLoging: false});
          } else this.setState({isLoging: false});
        } else this.setState({isLoging: false});
      } else this.setState({isLoging: false});
    } else {
      this.setState({isLoging: false});
      /*this.props.navigator.showSnackbar({
                text:"impossible de trouvé la variable user"
            })*/
      // console.log(user)
    }
  }

  retreiveSupervisorInfosCode() {
    getSupervisorInfoCode()
      .then(result => {
        console.warn('SUPERVISOR INFOS CODE', JSON.stringify(result));
        storeData(supervisorCode, JSON.stringify(result)).then(() => {
          this.setState({displayLoader: false});
        });
      })
      .catch(error => {
        //console.log(error);
      });
  }

  renderLoader() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        {Platform.OS === 'android' ? (
          <>
            <ProgressBarAndroid />
            <Text>{I18n.t('LOADING_DOTS')}</Text>
          </>
        ) : (
          <>
            <ActivityIndicator size="large" color={'#ccc'} />
            <Text>{I18n.t('LOADING_DOTS')}</Text>
          </>
        )}
      </View>
    );
  }

  retreiveCodeInformation() {
    this.setState({isLoging: true});
    const membre = this.state.user.member;
    return new Promise(async (resolve, reject) => {
      try {
        let datas = await getCodeInformation(membre);
        resolve(datas);
      } catch (e) {
        // console.log("Erreur", e);
        this.setState({isLoging: false});
        Alert.alert(
          I18n.t('UNABLE_TO_CONNECT_TITLE'),
          I18n.t('IMPOSSIBLE_TO_CONNECT_INTERNET'),
          [
            {
              text: I18n.t('NO'),
              onPress: () => {
                BackHandler.exitApp();
              },
            },
            {
              text: I18n.t('YES'),
              onPress: () => {
                this.retreiveSupervisorInfosCode();
                this.setState({isLoging: false});
              },
            },
          ],
          {cancelable: false},
        );
        reject(e);
      }
    });
  }

  async checkCodeParrain() {
    let {user} = this.state;
    if (this.checkOrShake(user.member, this.memberanim)) {
      this.setState({isLoging: true});

      if (this.state.isRegisterOffline) {
        getData(supervisorCode).then(codeSupervisor => {
          if (_.isNil(codeSupervisor)) {
            Alert.alert(
              I18n.t('ERROR_LABEL'),
              I18n.t('DATA_NOT_SYNCHRONISED_WITH_SERVER'),
              [
                {
                  text: I18n.t('NO'),
                  onPress: () => {
                    BackHandler.exitApp();
                  },
                },
                {
                  text: I18n.t('YES'),
                  onPress: () => {
                    this.setState({displayLoader: true});
                  },
                },
              ],
              {cancelable: false},
            );
          } else {
            let codeSupervisorsData = JSON.parse(codeSupervisor);
            let codeSupervisors = Object.keys(codeSupervisorsData);
            this.setState({codeSupervisorsData});

            if (!codeSupervisors.includes(user.member)) {
              Alert.alert(
                I18n.t('ERROR_LABEL'),
                I18n.t('CODE_AGENT_NOT_EXIST'),
                [
                  {
                    text: 'OK',
                    onPress: () => {
                      this.setState({isLoging: false});
                      //this.props.navigation.goBack();
                    },
                  },
                ],
                {cancelable: false},
              );
            } else {
              this.setState({isLoging: false});
              let resultInfosCode = codeSupervisorsData[user.member];
              this.setState({codeSupervisorData: resultInfosCode});

              if (
                resultInfosCode.network.is_companies_network === '1' &&
                resultInfosCode.child == 'geolocated'
              ) {
                this.props.navigation.push(route.createUserStep, {
                  type: this.type,
                  user: this.state.user,
                  result: resultInfosCode,
                  isActif: true,
                  isOffline: this.state.isRegisterOffline,
                });
              } else {
                this.setState({
                  displayFirstStep: false,
                  displaySecondStep: true,
                  isLoging: false,
                });
              }
            }
          }
        });
      } else {
        let result = {};
        try {
          result = await this.retreiveCodeInformation();
          // console.log("RESULTAT ", result);
          if (_.isNil(result.error)) {
            let resultInfosCode = await this.retreiveCodeInformation();
            if (_.isNil(resultInfosCode.error)) {
              this.setState({isLoging: false});
              if (
                resultInfosCode.network.is_companies_network === '1' &&
                resultInfosCode.child == 'geolocated'
              ) {
                this.props.navigation.push(route.createUserStep, {
                  type: this.type,
                  user: this.state.user,
                  result: resultInfosCode,
                  isActif: true,
                  isOffline: this.state.isRegisterOffline,
                });
              } else {
                this.setState({
                  displayFirstStep: false,
                  displaySecondStep: true,
                  isLoging: false,
                });
              }
            } else {
              Alert.alert(
                I18n.t('ERROR_LABEL'),
                '',
                [
                  {
                    text: 'OK',
                    onPress: () => {},
                  },
                ],
                {cancelable: false},
              );
            }
          } else {
            if (result.error !== undefined) {
              switch (result.error) {
                case -7:
                  Alert.alert(
                    I18n.t('ERROR_LABEL'),
                    result.error_msg,
                    [
                      {
                        text: 'OK',
                        onPress: () => {
                          this.setState({isLoging: false});
                          //this.props.navigation.goBack();
                        },
                      },
                    ],
                    {cancelable: false},
                  );
                  break;
                default:
                  Alert.alert(
                    I18n.t('ERROR_LABEL'),
                    '',
                    [
                      {
                        text: 'OK',
                        onPress: () => {
                          this.setState({isLoging: false});
                          //this.props.navigation.goBack();
                        },
                      },
                    ],
                    {cancelable: false},
                  );
              }
              this.setState({isLoading: false});
            }
          }
        } catch (e) {
          result = false;
        }
      }
    } else this.setState({isLoging: false});
  }

  checkOrShake(champ, view) {
    let res = false;
    if (
      (champ !== undefined && champ.length > 0) ||
      typeof champ === 'number'
    ) {
      res = true;
    } else {
      view.shake(800);
    }
    return res;
  }

  render() {
    return this.type === 1
      ? this.state.displayFirstStep
        ? this.renderCodeParrainField()
        : this.renderUserGeoAccount()
      : this.renderUserAccount();
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.primaryDark,
  },
  textbtnvalide: {
    color: 'white',
    fontWeight: 'bold',
  },
  bigtitle: {
    color: 'white',
    fontSize: 20,
    flex: 1,
    fontWeight: 'bold',
    textAlign: 'center',
    margin: 20,
  },
  subbigtitle: {
    color: 'white',
    fontSize: 17,
    textAlign: 'center',
    margin: 5,
  },
  indication: {
    color: 'white',
    fontSize: 14,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 10,
  },
  indicationTitle: {
    color: 'white',
    fontSize: 14,
    marginLeft: 20,
    fontWeight: '600',
  },
  btnvalide: {
    marginTop: 20,
    marginLeft: 20,
    marginRight: 20,
    borderColor: 'transparent',
    backgroundColor: theme.accentLight,
    height: 52,
  },
  input: {
    height: 60,
    marginTop: responsiveHeight(2),
    marginLeft: responsiveWidth(5),
    marginRight: responsiveWidth(5),
    borderRadius: 5,
  },
  dropdown: {
    height: 60,
    marginTop: responsiveHeight(2),
    marginLeft: responsiveWidth(5),
    marginRight: responsiveWidth(5),
    borderRadius: 5,
    backgroundColor: 'white',
  },
});