import CheckBox from '@react-native-community/checkbox';
import DateTimePicker from '@react-native-community/datetimepicker';
import Button from 'apsl-react-native-button';
import axios from 'axios';
import _ from 'lodash';
import isNil from 'lodash/isNil';
import React from 'react';
import {Component} from 'react';
import {
  Alert,
  BackHandler,
  FlatList,
  Image,
  PermissionsAndroid,
  Platform,
  ProgressBarAndroid,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Dialog from 'react-native-dialog';
import Geolocation from 'react-native-geolocation-service';
import I18n from 'react-native-i18n';
import ImagePicker from 'react-native-image-crop-picker';
import MapView, {Marker} from 'react-native-maps';
import {MaterialDialog} from 'react-native-material-dialog';
import {Dropdown} from 'react-native-material-dropdown-v2';
import OneSignal from 'react-native-onesignal';
import {
  responsiveHeight,
  responsiveWidth,
} from 'react-native-responsive-dimensions';
import {ProgressDialog} from 'react-native-simple-dialogs';
import {Fumi} from 'react-native-textinput-effects';
import {material} from 'react-native-typography';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {Color} from '../../config/Color';
import {FontWeight, Typography} from '../../config/typography';
import {
  actifToSave,
  supervisorCode,
  uploadImage,
  usagerToSave,
} from '../../webservice/IlinkConstants';
import {getData, storeData} from '../../webservice/persistences/StorageService';
import {
  saveActifSocietyAction,
  saveActifSocietyReset,
} from '../../webservice/regisseur/WalletRegisseurApi';
import {createGeolocatedAccount} from './../../webservice/AuthApi';
import {getPositionInformation} from './../../webservice/MapService';
import FilteredList from './FilteredList ';

const GEOLOCATION_OPTIONS = {
  enableHighAccuracy: true,
  timeout: 20000,
  maximumAge: 1000,
  useSignificantChanges: true,
};

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

class CreateUserStep 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.user = navigation.getParam('user', null);
    this.data = navigation.getParam('data', null);
    this.result = navigation.getParam('result', null);
    this.isActif = navigation.getParam('isActif', false);
    this.isOffline = navigation.getParam('isOffline', false);
    console.log('Is OFFLINE', this.isOffline);
    this.mapRef = new Array();
    console.log('DATA', this.data);

    console.log('PROPS', this.props);
    this.state = {
      password: null,
      isDataSubmit: false,
      enterPhone: null,
      nameanim: null,
      networksinglePickerVisible: false,
      surnameanim: null,
      passwordanim: null,
      confirmpassanim: null,
      network: this.result.network,
      isLoging: false,
      countries: [],
      snackVisible: false,
      snackText: '',
      disableNetwork: false,
      networks: [],
      modalVisible: true,
      select_network: I18n.t('SELECT_NETWORK'),
      user: this.user,
      result: this.result,
      data: this.data,
      //  town: this.data !== null ? this.data.town : null,
      town:
        this.data !== null && this.data.town
          ? this.data.town
          : {
              name: '',
              id: '2',
              indicatif: '',
              districts: [],
            },
      isActif: this.isActif,
      id_network_tax: null,
      tax_units_count: [],
      units_per_tax_unit_count: [],
      number_of_days: [],
      building_value: [],
      latlng: [],
      id_company_type: null,
      identification_number: null,
      remainingCharacters: 14,
      trade_registry: null,
      tabTaxe: [0],
      taxes_selected: [],
      companies_types_selected_value: null,
      responsable_name: null,
      technical_approval: null,
      municipality: 'Douala',
      neighborhood: null,
      district: 'Douala 4',
      id_patente: null,
      TVA: false,
      IRPP: false,
      licence: false,
      activity_type: null,
      year_tax_paid_N: false,
      year_tax_paid_N_1: false,
      year_tax_paid_N_2: false,
      image: null,
      displayImage: false,
      loadingUpload: false,
      required_taxes_selected: [],
      required_taxes: [],
      required_taxes_only_single_tax: [],
      required_taxes_only_single_tax_selected: [],
      isTaxesLoaded: false,
      index: 0,
      modalDialog: false,
      player_id: null,
      latitude: '',
      longitude: '',
      addNewTaxeOdtp: false,
      displayAddTaxeFromOtherNetwork: false,
      dataTaxesPublicite: {},
      publicites_taxes: null,
      messageRequiredImage: '',
      selectedTax: null,
      accountType: '',
      cni_number: '',
      birth_date: new Date(),
      birth_place: null,
      birth_country: null,
      nationality_country: null,
      father_lastname: null,
      father_firstname: null,
      mother_lastname: null,
      mother_firstname: null,
      signboard: null,
      entreprise_creation_date: new Date(), // initialisation avec la date actuelle
      showDatePicker: false,
      built: [false],
    };

    this.dataToSendTemp = new FormData();
    // console.log("PROPS", this.props);
    // console.log("STATE", this.state);
    this.props.saveActifSocietyReset();
    OneSignal.addEventListener('ids', this.onIds);
  }
  // Méthode appelée lors de la sélection d'une date
  onChangeDate = (event, selectedDate) => {
    // Sur Android, si l'utilisateur annule, event.type sera "dismissed"
    if (Platform.OS === 'android' && event.type === 'dismissed') {
      this.setState({showDatePicker: false});
      return;
    }
    const currentDate = selectedDate || this.state.entreprise_creation_date;
    this.setState({
      entreprise_creation_date: currentDate,
      showDatePicker: Platform.OS === 'ios', // en iOS, le picker reste affiché
    });
  };
  onChangeDate2 = (event, selectedDate) => {
    // Sur Android, si l'utilisateur annule, event.type sera "dismissed"
    if (Platform.OS === 'android' && event.type === 'dismissed') {
      this.setState({showDatePicker: false});
      return;
    }
    const currentDate = selectedDate || this.state.birth_date;
    this.setState({
      birth_date: currentDate,
      showDatePicker: Platform.OS === 'ios', // en iOS, le picker reste affiché
    });
  };

  // Afficher le date picker
  showDatePicker = () => {
    this.setState({showDatePicker: true});
  };
  createFormData = photo => {
    this.dataToSendTemp.append('image', {
      name: photo.path.split('/').pop(),
      type: photo.mime,
      uri:
        Platform.OS === 'android'
          ? photo.path
          : photo.path.replace('file://', ''),
    });
  };

  onIds = async device => {
    console.log('Device info: ', device);
    this.setState({player_id: device.userId}, () => {
      console.log('Player ID', this.state.player_id);
    });
  };

  componentDidMount() {
    this.mounted = true;
    const {type} = this.props;
    if (!this.state.isTaxesLoaded) {
      let taxesTemp = new Array();
      if (!_.isNil(this.result.required_taxes)) {
        this.result.required_taxes.map((taxes, index) => {
          if (this.state.companies_types_selected_value !== null) {
            if (this.state.companies_types_selected_value.name !== 'END') {
              let tempTaxes = taxes;
              tempTaxes.id_network_tax = taxes.id;
              if (taxes.measurement_unit !== 'forfait') {
                tempTaxes.tax_units_count = null;
                tempTaxes.units_per_tax_unit_count = null;
              }
              taxesTemp.push(tempTaxes);
            } else {
              if (taxes.id !== 70) {
                let tempTaxes = taxes;
                tempTaxes.id_network_tax = taxes.id;
                if (taxes.measurement_unit !== 'forfait') {
                  tempTaxes.tax_units_count = null;
                  tempTaxes.units_per_tax_unit_count = null;
                }
                taxesTemp.push(tempTaxes);
              }
            }
          } else {
            let tempTaxes = taxes;
            tempTaxes.id_network_tax = taxes.id;
            if (taxes.measurement_unit !== 'forfait') {
              tempTaxes.tax_units_count = null;
              tempTaxes.units_per_tax_unit_count = null;
            }
            taxesTemp.push(tempTaxes);
          }
        });
        this.setState({
          required_taxes: taxesTemp,
          isTaxesLoaded: true,
        });
      }
    }

    if (Platform.OS === 'android') {
      this.requestCameraPermission(false);
    } else {
      this.watchLocation(false);
    }
  }

  componentWillUnmount() {
    OneSignal.removeEventListener('ids', this.onIds);
  }

  updateRequiredTaxes(value) {
    let taxesTemp = new Array();

    this.result.required_taxes.map((taxes, index) => {
      if (value.name !== 'END') {
        let tempTaxes = taxes;
        tempTaxes.id_network_tax = taxes.id;
        if (taxes.measurement_unit !== 'forfait') {
          tempTaxes.tax_units_count = null;
          tempTaxes.units_per_tax_unit_count = null;
        }
        taxesTemp.push(tempTaxes);
      } else {
        if (taxes.id !== '70') {
          // console.log("ETABLISSEMENT", value);
          // console.log("TAXE", taxes);
          let tempTaxes = taxes;
          tempTaxes.id_network_tax = taxes.id;
          if (taxes.measurement_unit !== 'forfait') {
            tempTaxes.tax_units_count = null;
            tempTaxes.units_per_tax_unit_count = null;
          }
          taxesTemp.push(tempTaxes);
        }
      }
    });
    this.setState({
      required_taxes: taxesTemp,
    });
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  showErrorDialog() {
    this.setState({modalDialog: false});
    Alert.alert(
      'Une erreur est survenue',
      'Impossible de récuperer des informations du pays verifier que votre gps est activé,' +
        'et que vous êtes connecté à internet puis ressayer',
      [
        {
          text: 'Recommencer',
          onPress: () => {
            this.watchLocation();
          },
        },
        {
          text: 'Annuler',
          onPress: () => {
            this.props.navigation.popToTop();
          },
        },
      ],
    );
  }

  renderLoader = () => {
    return (
      <ProgressDialog
        visible={this.state.loadingUpload}
        title={I18n.t('LOADING')}
        message={I18n.t('UPLOAD_PHOTO')}
      />
    );
  };

  async requestCameraPermission(param) {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: 'Cool Photo App Camera Permission',
          message:
            'Cool Photo App needs access to your camera ' +
            'so you can take awesome pictures.',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        this.watchLocation(param);
      } else {
        this.setState({modalDialog: false});
        Alert.alert(
          "Echec à l'autorisation",
          "L'application n'est pas autorisé à acceder à votre position veuillez verifier que votre GPS est activé et configurer en mode Haute Precision",
          [
            {
              text: 'Ok',
              onPress: () => {
                this.props.navigation.popToTop();
              },
            },
          ],
        );
      }
    } catch (err) {
      this.setState({modalDialog: false});
      Alert.alert(
        'Une erreur est Survenue',
        "Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application",
        [
          {
            text: 'Ok',
            onPress: () => {
              BackHandler.exitApp();
            },
          },
        ],
      );
    }
  }

  async watchLocation(param) {
    if (this.isOffline) {
      Geolocation.getCurrentPosition(
        position => {
          console.log('Abena1===>>', this.isOffline);
          this.setState(
            {
              modalVisible: false,
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
            },
            () => {
              //console.log("latitude", this.state.latitude);
            },
          );
          if (this.result.child) {
            this.setState({disableNetwork: true});
            if (this.result.network) {
              this.setState({
                modalVisible: false,
                networks: [this.result.network],
              });
              if (
                this.result.child === 'geolocated' ||
                this.result.child === 'super'
              ) {
                this.setState({
                  network: this.result.network,
                  select_network: I18n.t('YOUR_NETWORK_SELECTED'),
                });
              }
            } else {
              this.showErrorDialog();
            }
          }
        },
        e => {
          Alert.alert(
            I18n.t('TITLE_PROBLE_COME'),
            'Impossible de recuperer les informations du code hiérarchique ou taxe',
            [
              {
                text: 'Reesayer',
                onPress: () => this.watchLocation(param),
              },
            ],
          );
          console.warn('POSITION ERROR', e);
          this.setState({modalVisible: false});
        },
        this.props.geolocationOptions,
      );
    } else {
      Geolocation.getCurrentPosition(
        position => {
          this.treatPosition(position, param);
        },
        e => {
          this.showErrorDialog();
        },
        this.props.geolocationOptions,
      );
      /*            if (!this.watchID) {
                            Geolocation.watchPosition((position) => {
                                this.treatPosition(position, param)
                            }, (e) => {
                                this.showErrorDialog();
                            }, this.props.geolocationOptions)
                        }*/
    }
  }

  treatPosition(position, param) {
    const myLastPosition = this.state.myPosition;
    const myPosition = position.coords;
    //console.log("Param transfer to location", param);

    if (param) {
      let taxes_selected = this.state.taxes_selected;
      taxes_selected[this.state.index].latitude = position.coords.latitude;
      taxes_selected[this.state.index].longitude = position.coords.longitude;

      this.setState({taxes_selected}, () => {
        console.warn('Taxes selected', taxes_selected);
      });
    }

    if (!_.isEqual(myPosition, myLastPosition)) {
      getPositionInformation(myPosition)
        .then(response => {
          console.log('Abena3===>>', response.results);
          console.log('Abena3===>>', response.results.length);
          if (response.results !== undefined) {
            if (response.results.length > 0) {
              let most = response.results[0];
              let {address_components, formatted_address, place_id} = most;
              this.setState({
                address: address_components,
                textadress: formatted_address,
                place: place_id,
                modalVisible: false,
              });
            }
          }
        })
        .catch(e => {
          this.showErrorDialog();
        });
      if (!_.isNil(position.coords)) {
        this.setState({myPosition});
        if (
          this.mapRef[this.state.index] !== undefined &&
          this.mapRef[this.state.index] !== null
        ) {
          this.mapRef[this.state.index].animateToCoordinate(
            {
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
            },
            1000,
          );
          this.mapRef[this.state.index].animateToRegion(
            {
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              latitudeDelta: 0.03,
              longitudeDelta: 0.01,
            },
            1000,
          );
        }
      }
    }
  }

  prepareModal() {
    return (
      <MaterialDialog
        visible={this.state.modalVisible}
        title={I18n.t('LOADING_INFO')}>
        <View style={{justifyContent: 'center', alignItems: 'center'}}>
          <Text>{I18n.t('LOADING_DESCRIPTION_COUNTRY')}</Text>
          <ProgressBarAndroid />
        </View>
      </MaterialDialog>
    );
  }

  uploadImage = () => {
    axios({
      url: `${uploadImage}`,
      method: 'POST',
      data: this.dataToSendTemp,
      headers: {
        'X-Localization': I18n.currentLocale(),
        'Content-Type': 'multipart/form-data',
      },
    })
      .then(response => {
        //console.log(response);
        let taxes_selected = this.state.taxes_selected;
        taxes_selected[this.state.index].image =
          response.data.response.filename;
        this.setState({taxes_selected, loadingUpload: false});
      })
      .catch(error => {
        console.log(error);
        if (error.response) console.log(error.response);
        else if (error.request) console.log(error.request);
        else console.log(error.message);

        Alert.alert('', I18n.t('TITLE_ERROR_SURVENU'), [
          {
            text: 'Ok',
            onPress: () => {},
          },
        ]);
        this.setState({loadingUpload: false});
      });
  };

  renderCreateActifResponse = () => {
    const {result, error} = this.props;

    if (error !== null) {
      if (typeof error.data !== 'undefined') {
        Alert.alert(
          I18n.t('UNABLE_TO_CREATE_ACCOUNT'),
          error.data.error_msg,
          [
            {
              text: I18n.t('OK'),
              onPress: () => {
                this.props.saveActifSocietyReset();
              },
            },
          ],
          {cancelable: false},
        );
      }
    }

    if (result !== null) {
      if (result.response !== null) {
        Alert.alert(
          I18n.t('SUCCESS'),
          result.success_msg,
          [
            {
              text: I18n.t('OK'),
              onPress: () => {
                this.props.saveActifSocietyReset();
                this.props.navigation.popToTop();
              },
            },
          ],
          {cancelable: false},
        );
      }
    }
  };

  renderDialogImage = () => {
    return (
      <Dialog.Container
        contentStyle={{width: responsiveWidth(80)}}
        useNativeDriver={true}
        visible={this.state.displayImage}>
        <Dialog.Title>{I18n.t('PREVISUALISATION')}</Dialog.Title>

        <View>
          <View style={{width: 50}} />
          <View
            style={{
              justifyContent: 'center',
              alignContent: 'center',
              alignItems: 'center',
            }}>
            <Image
              source={{uri: this.state.image.path}}
              style={{
                width: this.state.image.width,
                height: this.state.image.height,
                aspectRatio: 1,
                resizeMode: 'contain',
              }}
            />
          </View>
          <View style={{width: 50}} />
        </View>

        <Dialog.Button
          bold={true}
          label={I18n.t('OK')}
          onPress={() => {
            this.setState({
              displayImage: false,
            });
            if (this.isOffline) {
              if (this.state.addNewTaxeOdtp) {
                let taxes_selected = this.state.publicites_taxes;
                if (!_.isNil(taxes_selected)) {
                  taxes_selected.image = this.state.image;
                  this.setState({
                    publicites_taxes: taxes_selected,
                    loadingUpload: false,
                  });
                }
              } else {
                let taxes_selected = this.state.taxes_selected;
                taxes_selected[this.state.index].image = this.state.image;
                this.setState({taxes_selected, loadingUpload: false});
              }
            } else {
              this.setState({loadingUpload: true});
              this.uploadImage();
            }
          }}
        />
      </Dialog.Container>
    );
  };

  renderRequiredTaxesDropdown = (item, index) => {
    return (
      <>
        {/* <Animatable.View key={index}>
                    <View
                        style={{
                            marginTop: 20,
                            flexDirection: "row",
                            paddingRight: 20,
                            paddingLeft: 20,
                        }}>

                        <View style={{
                            width: responsiveWidth(90),
                            borderRadius: 10,
                            alignSelf: "center",
                            backgroundColor: 'white'
                        }}>
                            <Dropdown
                                label={I18n.t('TAXES_SUR_LA_PROPRETE')}
                                disabled={true}
                                data={this.state.required_taxes}
                                useNativeDriver={true}
                                valueExtractor={(value) => {
                                    return value
                                }}
                                value={item.name}
                                labelExtractor={(value) => {
                                    return value.name
                                }}
                            />
                        </View>
                    </View>
                </Animatable.View> */}
        {item.measurement_unit !== 'forfait' && (
          <>
            <Animatable.View>
              <Fumi
                iconClass={FontAwesomeIcon}
                iconName={'check-circle'}
                label={item.labels[0]}
                iconColor={'#f95a25'}
                keyboardType="numeric"
                iconSize={20}
                style={styles.input}
                value={item.tax_units_count === null ? 1 : item.tax_units_count}
                onChangeText={value => {
                  let tax_units_count = this.state.required_taxes;
                  if (value === '')
                    tax_units_count[index].tax_units_count = null;
                  else tax_units_count[index].tax_units_count = value;
                  this.setState({required_taxes: tax_units_count});
                }}></Fumi>
            </Animatable.View>

            {item.labels.length === 2 && (
              <Animatable.View>
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'check'}
                  label={
                    isNil(item.labels[1])
                      ? I18n.t('UNIT_PER_TAXE_UNIT_COUNT')
                      : item.labels[1]
                  }
                  iconColor={'#f95a25'}
                  keyboardType="decimal-pad"
                  iconSize={20}
                  value={item.units_per_tax_unit_count}
                  style={styles.input}
                  onChangeText={value => {
                    let units_per_tax_unit_count = this.state.required_taxes;
                    units_per_tax_unit_count[index].units_per_tax_unit_count =
                      value;
                    this.setState({required_taxes: units_per_tax_unit_count});
                  }}></Fumi>
              </Animatable.View>
            )}
          </>
        )}
      </>
    );
  };

  renderPubliciteTaxesDropdown = () => {
    return (
      <>
        <Animatable.View>
          <View
            style={{
              marginTop: 20,
              flexDirection: 'row',
              paddingRight: 20,
              paddingLeft: 20,
            }}>
            <View
              style={{
                width: responsiveWidth(90),
                borderRadius: 10,
                alignSelf: 'center',
                backgroundColor: 'white',
              }}>
              <Dropdown
                label={I18n.t('TAXES_SUR_LA_PUBLICITE')}
                data={this.state.dataTaxesPublicite.taxes}
                useNativeDriver={true}
                valueExtractor={value => {
                  return value;
                }}
                labelExtractor={value => {
                  return value.name;
                }}
                onChangeText={(value, i, data) => {
                  this.setState({publicites_taxes: value}, () => {
                    //console.log("Taxes", this.state.publicites_taxes);
                  });
                }}
              />
            </View>
          </View>
        </Animatable.View>
        {!isNil(this.state.publicites_taxes)
          ? this.state.publicites_taxes.measurement_unit !== 'forfait' && (
              <>
                <Animatable.View>
                  <Fumi
                    iconClass={FontAwesomeIcon}
                    iconName={'check-circle'}
                    label={this.state.publicites_taxes.labels[0]}
                    iconColor={'#f95a25'}
                    keyboardType="decimal-pad"
                    iconSize={20}
                    style={styles.input}
                    value={
                      this.state.publicites_taxes.tax_units_count === null
                        ? 1
                        : this.state.publicites_taxes.tax_units_count
                    }
                    onChangeText={value => {
                      let tax_units_count = this.state.publicites_taxes;
                      if (value === '') tax_units_count.tax_units_count = null;
                      else tax_units_count.tax_units_count = value;
                      this.setState({publicites_taxes: tax_units_count});
                    }}></Fumi>
                </Animatable.View>

                {this.state.publicites_taxes.labels.length === 2 && (
                  <Animatable.View>
                    <Fumi
                      iconClass={FontAwesomeIcon}
                      iconName={'check'}
                      label={
                        isNil(this.state.publicites_taxes.labels[1])
                          ? I18n.t('UNIT_PER_TAXE_UNIT_COUNT')
                          : this.state.publicites_taxes.labels[1]
                      }
                      iconColor={'#f95a25'}
                      keyboardType="decimal-pad"
                      iconSize={20}
                      value={
                        this.state.publicites_taxes.units_per_tax_unit_count
                      }
                      style={styles.input}
                      onChangeText={value => {
                        let units_per_tax_unit_count =
                          this.state.publicites_taxes;
                        units_per_tax_unit_count.units_per_tax_unit_count =
                          value;
                        this.setState({
                          publicites_taxes: units_per_tax_unit_count,
                        });
                      }}
                    />
                  </Animatable.View>
                )}
              </>
            )
          : null}
        {!isNil(this.state.publicites_taxes)
          ? this.state.publicites_taxes.has_image_capture === '1' && (
              <View style={[styles.contentPicker]}>
                <TouchableOpacity
                  style={[styles.contain]}
                  onPress={() => {
                    ImagePicker.openCamera({
                      width: 400,
                      height: 281,
                      cropping: true,
                      useFrontCamera: false,
                    }).then(image => {
                      this.createFormData(image);
                      this.setState({image, displayImage: true});
                    });
                  }}
                  activeOpacity={0.9}>
                  <View style={[styles.contcontainerCenterentLeft]}>
                    <View>
                      <Icon
                        name="image"
                        color={Color.whiteColor}
                        style={[styles.thumb]}
                        size={80}
                      />
                      <View
                        style={[
                          styles.point,
                          {backgroundColor: Color.accentColor},
                        ]}>
                        <Icon
                          name="camera-image"
                          color={Color.whiteColor}
                          size={20}
                        />
                      </View>
                    </View>
                  </View>
                </TouchableOpacity>
                <Text
                  style={[
                    Typography.footnote,
                    FontWeight.semibold,
                    {color: Color.whiteColor},
                  ]}>
                  {I18n.t('IMAGE_TAKE')}
                </Text>
              </View>
            )
          : null}
      </>
    );
  };

  renderTaxesDropdown = index => {
    const isTaxesEmpty =
      !this.state.result.taxes || this.state.result.taxes.length === 0;
    // ─── CALCUL DE LA VALEUR MERCURIALE ───────────────────────────────
    // Trouve l’objet quartier correspondant au nom sélectionné
    const selectedNeighbourhood = this.state.result.neighborhoods.find(
      n => n.name === this.state.neighborhood,
    );
    // Choisit built ou unbuilt selon le dropdown, ou null si introuvable
    const mercurialValue = selectedNeighbourhood
      ? this.state.built[index]
        ? selectedNeighbourhood.mercur_built_value
        : selectedNeighbourhood.mercur_unbuilt_value
      : null;
    //
    return (
      <>
        <Animatable.View
          ref={comp => {
            this.taxesAnim = comp;
          }}
          key={index}>
          <View
            style={{
              marginTop: 20,
              flexDirection: 'row',
              paddingRight: 20,
              paddingLeft: 20,
            }}>
            {isTaxesEmpty ? null : (
              <View
                style={{
                  width: responsiveWidth(90),
                  borderRadius: 10,
                  alignSelf: 'center',
                  backgroundColor: 'white',
                }}>
                <Dropdown
                  label={`${I18n.t('TAXES')} *`}
                  data={this.state.result.taxes}
                  useNativeDriver={true}
                  valueExtractor={value => {
                    return value;
                  }}
                  onChangeText={(value, i, data) => {
                    let taxes_seleted = this.state.taxes_selected;
                    if (index === 0) {
                      taxes_seleted = new Array();
                      taxes_seleted[index] = value;
                    } else taxes_seleted[index] = value;
                    this.setState({taxes_selected: taxes_seleted}, () => {
                      // console.log("Taxes", this.state.taxes_selected);
                      // console.log("Index", index);
                    });
                  }}
                  labelExtractor={value => {
                    return value.name;
                  }}
                />
              </View>
            )}

            {this.state.network.has_many_taxes === '1' && (
              <View>
                <TouchableOpacity
                  style={[
                    styles.contain,
                    {
                      backgroundColor: Color.accentColor,
                      alignItems: 'center',
                      justifyContent: 'center',
                      position: 'absolute',
                      width: 25,
                      bottom: 0,
                      zIndex: 10,
                      left: -10,
                      height: 25,
                      borderRadius: 11,
                    },
                  ]}
                  onPress={() => {
                    let tabTaxe = this.state.tabTaxe;
                    if (index === 0) {
                      let lastElement =
                        this.state.tabTaxe[this.state.tabTaxe.length - 1];
                      tabTaxe.push(lastElement++);
                      this.setState({tabTaxe});
                    } else {
                      tabTaxe = tabTaxe.filter((element, i) => index !== i);
                      this.setState({tabTaxe});
                    }
                  }}
                  activeOpacity={0.9}>
                  <View>
                    <View>
                      <Icon
                        name={index > 0 ? 'minus' : 'plus'}
                        color={Color.whiteColor}
                        size={20}
                      />
                    </View>
                  </View>
                </TouchableOpacity>
              </View>
            )}
          </View>
        </Animatable.View>
        {console.log(
          'this.state.taxes_selected[index]==>',
          this.state.taxes_selected[index],
        )}
        {console.log(
          'this.state.taxes_selected[index]==>',
          !isNil(this.state.taxes_selected[index]),
        )}
        {!isNil(this.state.taxes_selected[index])
          ? this.state.taxes_selected[index].measurement_unit !== 'forfait' && (
              <>
                <Animatable.View>
                  <Fumi
                    iconClass={FontAwesomeIcon}
                    iconName={'check-circle'}
                    label={this.state.taxes_selected[index].labels[0]}
                    iconColor={'#f95a25'}
                    keyboardType="decimal-pad"
                    iconSize={20}
                    style={styles.input}
                    onChangeText={value => {
                      let tax_units_count = this.state.tax_units_count;
                      if (index === 0) {
                        tax_units_count = [];
                        tax_units_count[0] = value;
                      } else tax_units_count[index] = value;
                      this.setState({tax_units_count: tax_units_count});
                    }}></Fumi>
                </Animatable.View>

                {this.state.taxes_selected[index].labels.length === 2 && (
                  <Animatable.View>
                    <Fumi
                      iconClass={FontAwesomeIcon}
                      iconName={'check'}
                      label={
                        isNil(this.state.taxes_selected[index].labels[1])
                          ? I18n.t('UNIT_PER_TAXE_UNIT_COUNT')
                          : this.state.taxes_selected[index].labels[1]
                      }
                      iconColor={'#f95a25'}
                      keyboardType="decimal-pad"
                      iconSize={20}
                      style={styles.input}
                      onChangeText={value => {
                        let units_per_tax_unit_count =
                          this.state.units_per_tax_unit_count;
                        if (index === 0) {
                          units_per_tax_unit_count = [];
                          units_per_tax_unit_count[0] = value;
                        } else units_per_tax_unit_count[index] = value;
                        this.setState({
                          units_per_tax_unit_count: units_per_tax_unit_count,
                        });
                      }}></Fumi>
                  </Animatable.View>
                )}
              </>
            )
          : null}
        {!isNil(this.state.taxes_selected[index])
          ? this.state.taxes_selected[index].has_image_capture === '1' && (
              <View style={[styles.contentPicker]}>
                <TouchableOpacity
                  style={[styles.contain]}
                  onPress={() => {
                    ImagePicker.openCamera({
                      width: 400,
                      height: 281,
                      cropping: true,
                      useFrontCamera: false,
                    }).then(image => {
                      this.createFormData(image);
                      this.setState({image, displayImage: true, index});
                    });
                  }}
                  activeOpacity={0.9}>
                  <View style={[styles.contcontainerCenterentLeft]}>
                    <View>
                      <Icon
                        name="image"
                        color={Color.whiteColor}
                        style={[styles.thumb]}
                        size={80}
                      />
                      <View
                        style={[
                          styles.point,
                          {backgroundColor: Color.accentColor},
                        ]}>
                        <Icon
                          name="camera-image"
                          color={Color.whiteColor}
                          size={20}
                        />
                      </View>
                    </View>
                  </View>
                </TouchableOpacity>
                <Text
                  style={[
                    Typography.footnote,
                    FontWeight.semibold,
                    {color: Color.whiteColor},
                  ]}>
                  {I18n.t('IMAGE_TAKE')}
                </Text>
              </View>
            )
          : null}
        {!isNil(this.state.taxes_selected[index])
          ? this.state.taxes_selected[index].billing_period === 'jour' && (
              <Animatable.View>
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'calendar'}
                  label={I18n.t('NUMBER_OF_DAYS')}
                  iconColor={'#f95a25'}
                  iconSize={20}
                  keyboardType="numeric"
                  onChangeText={value => {
                    let {number_of_days} = this.state.number_of_days;
                    if (index === 0) {
                      number_of_days = [];
                      number_of_days[0] = value;
                    } else number_of_days[index] = value;
                    this.setState({number_of_days});
                  }}
                  style={styles.input}></Fumi>
              </Animatable.View>
            )
          : null}
        {
          /*  Champs spécifiques à la taxe foncière (“taxe sur la propriété”)  */
          !isNil(this.state.taxes_selected[index]) &&
            this.state.taxes_selected[index].name?.toLowerCase() ===
              'taxe sur la propriété' && (
              <>
                {/* Sélection Immeuble bâti → built */}
                <Animatable.View>
                  <View
                    style={{
                      width: responsiveWidth(90),
                      alignSelf: 'center',
                      backgroundColor: 'white',
                      borderRadius: 10,
                      marginTop: 20,
                      paddingLeft: 20,
                      paddingRight: 20,
                    }}>
                    <Dropdown
                      label={I18n.t('BUILDING_CONSTRUCTED')}
                      data={[{value: 'Non'}, {value: 'Oui'}]}
                      value={this.state.built[index] ? 'Oui' : 'Non'}
                      onChangeText={value => {
                        const built = [...this.state.built];
                        // quand Non → false, Oui → true
                        built[index] = value === 'Oui';
                        this.setState({built});
                      }}
                    />
                  </View>
                </Animatable.View>
                {mercurialValue != null && (
                  <Text
                    style={{
                      marginTop: 5,
                      marginLeft: responsiveWidth(6),
                      fontSize: 16,
                      color: '#fff',
                    }}>
                    {`${I18n.t('MERCURIAL_VALUE')}: ${mercurialValue}`}
                  </Text>
                )}
                {/* Saisir la valeur mercuriale → units_per_tax_unit_count */}
                {/* <Animatable.View>
                                <Fumi
                                    iconClass={FontAwesomeIcon}
                                    iconName="money-bill-wave"
                                    label={I18n.t('MERCURIAL_VALUE')}
                                    iconColor="#f95a25"
                                    iconSize={20}
                                    keyboardType="decimal-pad"
                                    style={styles.input}
                                    onChangeText={(value) => {
                                        const units_per_tax_unit_count = [...this.state.units_per_tax_unit_count];
                                        units_per_tax_unit_count[index] = value;
                                        this.setState({ units_per_tax_unit_count });
                                    }}
                                />
                            </Animatable.View> */}

                {/* Saisir la valeur de la construction → building_value */}
                {this.state.built[index] && (
                  <Animatable.View>
                    <Fumi
                      iconClass={FontAwesomeIcon}
                      iconName="building"
                      label={I18n.t('CONSTRUCTION_VALUE')}
                      iconColor="#f95a25"
                      iconSize={20}
                      keyboardType="decimal-pad"
                      style={styles.input}
                      onChangeText={value => {
                        const building_value = [...this.state.building_value];
                        building_value[index] = value;
                        this.setState({building_value});
                      }}
                    />
                  </Animatable.View>
                )}
              </>
            )
        }
      </>
    );
  };

  renderTaxesEntreprisesDropdown = index => {
    return (
      <>
        <Animatable.View
          ref={comp => {
            this.taxesAnim = comp;
          }}
          key={index}>
          <View
            style={{
              marginTop: 20,
              flexDirection: 'row',
              paddingRight: 20,
              paddingLeft: 20,
            }}>
            <View
              style={{
                width: responsiveWidth(90),
                borderRadius: 10,
                alignSelf: 'center',
                backgroundColor: 'white',
              }}>
              <Dropdown
                label={I18n.t('TAXES')}
                data={this.state.result.taxes}
                useNativeDriver={true}
                valueExtractor={value => {
                  return value;
                }}
                onChangeText={(value, i, data) => {
                  //console.log("Value selected", value);

                  let taxes_seleted = this.state.taxes_selected;
                  if (index === 0) {
                    taxes_seleted = new Array();
                    taxes_seleted[index] = value;
                  } else taxes_seleted[index] = value;
                  this.setState({taxes_selected: taxes_seleted}, () => {
                    // console.log("Taxes", this.state.taxes_selected);
                    // console.log("Index", index);
                  });

                  if (Platform.OS === 'android') {
                    this.requestCameraPermission(true);
                  } else {
                    this.watchLocation(true);
                  }
                }}
                labelExtractor={value => {
                  return value.name;
                }}
              />
            </View>

            <View>
              <TouchableOpacity
                style={[
                  styles.contain,
                  {
                    backgroundColor: Color.accentColor,
                    alignItems: 'center',
                    justifyContent: 'center',
                    position: 'absolute',
                    width: 25,
                    bottom: 0,
                    zIndex: 10,
                    left: -10,
                    height: 25,
                    borderRadius: 11,
                  },
                ]}
                onPress={() => {
                  let tabTaxe = this.state.tabTaxe;
                  if (index === 0) {
                    let lastElement =
                      this.state.tabTaxe[this.state.tabTaxe.length - 1];
                    tabTaxe.push(lastElement++);
                    this.setState({tabTaxe});
                  } else {
                    tabTaxe = tabTaxe.filter((element, i) => index !== i);
                    this.setState({tabTaxe});
                  }
                }}
                activeOpacity={0.9}>
                <View>
                  <View>
                    <Icon
                      name={index > 0 ? 'minus' : 'plus'}
                      color={Color.whiteColor}
                      size={20}
                    />
                  </View>
                </View>
              </TouchableOpacity>
            </View>
          </View>
        </Animatable.View>
        {!isNil(this.state.taxes_selected[index])
          ? this.state.taxes_selected[index].measurement_unit !== 'forfait' && (
              <>
                <Animatable.View>
                  <Fumi
                    iconClass={FontAwesomeIcon}
                    iconName={'check-circle'}
                    label={this.state.taxes_selected[index].labels[0]}
                    iconColor={'#f95a25'}
                    keyboardType="decimal-pad"
                    iconSize={20}
                    style={styles.input}
                    onChangeText={value => {
                      let tax_units_count = this.state.tax_units_count;
                      if (index === 0) {
                        tax_units_count = [];
                        tax_units_count[0] = value;
                      } else tax_units_count[index] = value;
                      this.setState({tax_units_count: tax_units_count});
                    }}></Fumi>
                </Animatable.View>

                {this.state.taxes_selected[index].labels.length === 2 && (
                  <Animatable.View>
                    <Fumi
                      iconClass={FontAwesomeIcon}
                      iconName={'check'}
                      label={
                        isNil(this.state.taxes_selected[index].labels[1])
                          ? I18n.t('UNIT_PER_TAXE_UNIT_COUNT')
                          : this.state.taxes_selected[index].labels[1]
                      }
                      iconColor={'#f95a25'}
                      keyboardType="decimal-pad"
                      iconSize={20}
                      style={styles.input}
                      onChangeText={value => {
                        let units_per_tax_unit_count =
                          this.state.units_per_tax_unit_count;
                        if (index === 0) {
                          units_per_tax_unit_count = [];
                          units_per_tax_unit_count[0] = value;
                        } else units_per_tax_unit_count[index] = value;
                        this.setState({
                          units_per_tax_unit_count: units_per_tax_unit_count,
                        });
                      }}></Fumi>
                  </Animatable.View>
                )}
              </>
            )
          : null}

        {!isNil(this.state.taxes_selected[index])
          ? this.state.taxes_selected[index].has_image_capture === '1' && (
              <View style={[styles.contentPicker]}>
                <TouchableOpacity
                  style={[styles.contain]}
                  onPress={() => {
                    ImagePicker.openCamera({
                      width: 400,
                      height: 281,
                      cropping: true,
                      useFrontCamera: false,
                    }).then(image => {
                      this.createFormData(image);
                      this.setState({image, displayImage: true, index});
                    });
                  }}
                  activeOpacity={0.9}>
                  <View style={[styles.contcontainerCenterentLeft]}>
                    <View>
                      <Icon
                        name="image"
                        color={Color.whiteColor}
                        style={[styles.thumb]}
                        size={80}
                      />
                      <View
                        style={[
                          styles.point,
                          {backgroundColor: Color.accentColor},
                        ]}>
                        <Icon
                          name="camera-image"
                          color={Color.whiteColor}
                          size={20}
                        />
                      </View>
                    </View>
                  </View>
                </TouchableOpacity>
                <Text
                  style={[
                    Typography.footnote,
                    FontWeight.semibold,
                    {color: Color.whiteColor},
                  ]}>
                  {I18n.t('IMAGE_TAKE')}
                </Text>
              </View>
            )
          : null}

        <Text
          style={{
            fontSize: 16,
            marginTop: 10,
            marginLeft: responsiveWidth(6),
            marginRight: responsiveWidth(6),
            color: 'white',
            fontWeight: 'bold',
          }}>
          {I18n.t('WAIT_LOADING_POSITION')}
        </Text>

        {this.isOffline ? (
          <Animatable.View>
            <View style={{flexDirection: 'row', flex: 1}}>
              <Fumi
                iconClass={FontAwesomeIcon}
                iconName={'map-marker'}
                value={'' + this.state.latitude}
                enabled={false}
                placeholder={I18n.t('LATITUDE')}
                editable={false}
                style={{
                  width: responsiveWidth(45),
                  height: responsiveHeight(10),
                  alignSelf: 'center',
                  marginLeft: responsiveWidth(5),
                  marginRight: responsiveWidth(5),
                  borderRadius: 5,
                }}
              />
              <View>
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'map-marker'}
                  placeholder={I18n.t('LONGITITUDE')}
                  iconColor={'#f95a25'}
                  editable={false}
                  enabled={false}
                  iconSize={20}
                  value={'' + this.state.longitude}
                  style={{
                    width: responsiveWidth(40),
                    height: responsiveHeight(10),
                    alignSelf: 'center',
                    marginRight: responsiveWidth(5),
                    borderRadius: 5,
                  }}></Fumi>
              </View>
            </View>
          </Animatable.View>
        ) : (
          <>
            <Animatable.View
              ref={comp => {
                this.mapanim = comp;
              }}>
              <MapView
                liteMode
                ref={ref => {
                  this.mapRef[this.state.index] = ref;
                }}
                style={styles.map}>
                {this.state.myPosition !== undefined ? (
                  <Marker
                    title={I18n.t('YOUR_THERE')}
                    minZoomLevel={18}
                    coordinate={{
                      longitude: this.state.myPosition.longitude,
                      latitude: this.state.myPosition.latitude,
                    }}
                  />
                ) : null}
              </MapView>
            </Animatable.View>
            {/* <TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Image

                                style={{
                                    width: 24, height: 24,
                                    marginLeft: responsiveWidth(6)
                                }}
                                source={require('../../assets/img/userplace.png')}
                            />
                            <Text
                                style={{
                                    fontSize: 16,
                                    marginTop: 10, marginRight: responsiveWidth(6), color: 'white', fontWeight: 'bold'
                                }}
                            >{this.state.textadress !== undefined ? this.state.textadress : I18n.t('TAKE_MY_POSITION')}</Text>
                        </TouchableOpacity> */}
          </>
        )}
        <Animatable.View
          ref={comp => {
            this.districtAnim = comp;
          }}>
          <View
            style={{
              width: responsiveWidth(90),
              marginTop: 20,
              alignSelf: 'center',
              borderRadius: 10,
              paddingLeft: 20,
              paddingRight: 20,
              backgroundColor: 'white',
            }}>
            <Dropdown
              label={I18n.t('ARRONDISSEMENT')}
              data={this.result.districts}
              useNativeDriver={true}
              valueExtractor={value => {
                return value;
              }}
              labelExtractor={value => {
                return value.name;
              }}
              onChangeText={(value, index, data) => {
                let taxes_selected = this.state.taxes_selected;
                taxes_selected[this.state.index].district = value.name;
                this.setState({taxes_selected});
              }}
            />
          </View>
        </Animatable.View>

        <Animatable.View
          ref={comp => {
            this.neightborhoodAnim = comp;
          }}>
          <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'map-marker'}
            label={I18n.t('QUARTIER_COMMUNE')}
            iconColor={'#f95a25'}
            iconSize={20}
            style={styles.input}
            onChangeText={text => {
              let taxes_selected = this.state.taxes_selected;
              taxes_selected[this.state.index].neighborhood = text;
              this.setState({taxes_selected});
            }}
          />
        </Animatable.View>
      </>
    );
  };
  handleTaxSlection = selectedTax => {
    this.setState({selectedTax});
  };

  renderUserGeoAccount() {
    let year = new Date();
    const {required_taxes_only_single_tax, selectedTax, accountType} =
      this.state;
    return (
      <View style={styles.container}>
        {this.state.displayImage && this.renderDialogImage()}
        {this.state.loadingUpload && this.renderLoader()}
        <View style={{flexDirection: 'row'}}>
          <Icon.Button
            name={'keyboard-backspace'}
            color={'white'}
            size={24}
            backgroundColor={theme.primary}
            onPress={() => this.props.navigation.pop()}
          />
          <Text style={styles.bigtitle}>{I18n.t('LAST_STEP')}</Text>
        </View>
        <ScrollView
          ref={component => (this._scrollView = component)}
          style={styles.container}>
          {/* Sélection du type de compte */}

          <>
            <Text style={styles.title}>
              {I18n.t('INFORMATION_FICHE_CIRCUIT')}
            </Text>
            {/* <View
                                style={{
                                    width: responsiveWidth(90),
                                    marginTop: 20,
                                    alignSelf: 'center',
                                    borderRadius: 10,
                                    paddingLeft: 20,
                                    paddingRight: 20,
                                    backgroundColor: 'white'
                                }}>
                                <Dropdown
      label="Type de compte"
      data={[
        { label: "Personne Physique", value: "PP" },
        { label: "Personne Morale", value: "PM" }
      ]}
      onChangeText={(value) => this.setState({ accountType: value })}
      value={accountType}
    />
                            </View> */}

            <Animatable.View
              ref={comp => {
                this.societyTypeAnim = comp;
              }}>
              <View
                style={{
                  width: responsiveWidth(90),
                  marginTop: 20,
                  alignSelf: 'center',
                  borderRadius: 10,
                  paddingLeft: 20,
                  paddingRight: 20,
                  backgroundColor:
                    this.state.accountType && this.state.accountType !== ''
                      ? '#FFE0B2'
                      : 'white',
                }}>
                {console.log(
                  'this.state.result.companies_types===>>',
                  this.state.result.companies_types,
                )}
                <Dropdown
                  label={`${I18n.t('SOCIETY_TYPE')} *`}
                  data={
                    this.state.result !== null
                      ? this.state.result.companies_types
                      : []
                  }
                  useNativeDriver={true}
                  valueExtractor={value => {
                    return value;
                  }}
                  labelExtractor={value => {
                    return value.description;
                  }}
                  onChangeText={(value, index, data) => {
                    this.setState({companies_types_selected: value.id});
                    this.updateRequiredTaxes(value);
                    console.log('value12===>>', value);
                    if (value.name === 'PPH') {
                      this.setState({accountType: 'PP'});
                    } else {
                      this.setState({accountType: 'PM'});
                    }
                  }}
                />
              </View>
            </Animatable.View>
            {accountType === 'PP' && (
              <>
                {/* Champ NUMERO CNI (obligatoire) */}
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'id-card'}
                  label={I18n.t('ID_CARD_NUMBER')}
                  iconColor={'#f95a25'}
                  style={styles.input}
                  value={this.state.cni_number}
                  onChangeText={text => this.setState({cni_number: text})}
                />
                {/* Champ DATE DE NAISSANCE (obligatoire) */}
                {/* <Fumi
          iconClass={FontAwesomeIcon}
          iconName={'calendar'}
          label="Date de naissance *"
          iconColor={'#f95a25'}
          style={styles.input}
          value={this.state.birth_date}
          onChangeText={(text) => this.setState({ birth_date: text })}
        /> */}
                <TouchableOpacity
                  onPress={this.showDatePicker}
                  style={{
                    height: 60,
                    marginTop: responsiveHeight(2),
                    marginLeft: responsiveWidth(5),
                    marginRight: responsiveWidth(5),
                    backgroundColor: 'white',
                    padding: 10,
                    borderRadius: 5,
                  }}>
                  <View>
                    <Text style={{marginLeft: 5, marginBottom: 5}}>
                      {I18n.t('BIRTH_DATE')}
                    </Text>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                      <FontAwesomeIcon
                        name="calendar"
                        size={20}
                        color="#f95a25"
                      />
                      <Text style={{marginLeft: 10}}>
                        {this.state.birth_date.toLocaleDateString()}
                      </Text>
                    </View>
                  </View>
                </TouchableOpacity>
                {this.state.showDatePicker && (
                  <DateTimePicker
                    testID="dateTimePicker"
                    value={this.state.birth_date}
                    mode="date"
                    display="default"
                    onChange={this.onChangeDate2}
                  />
                )}
                {/* Champ LIEU DE NAISSANCE (obligatoire) */}
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'map-marker'}
                  label={I18n.t('BIRTH_PLACE')}
                  iconColor={'#f95a25'}
                  style={styles.input}
                  value={this.state.birth_place}
                  onChangeText={text => this.setState({birth_place: text})}
                />
                {/* Champ PAYS NAISSANCE (obligatoire) */}
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'globe'}
                  label={I18n.t('BIRTH_COUNTRY')}
                  iconColor={'#f95a25'}
                  style={styles.input}
                  value={this.state.birth_country}
                  onChangeText={text => this.setState({birth_country: text})}
                />
                {/* Champ PAYS NATIONALITE (obligatoire) */}
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'flag'}
                  label={I18n.t('NATIONALITY_FORM')}
                  iconColor={'#f95a25'}
                  style={styles.input}
                  value={this.state.nationality_country}
                  onChangeText={text =>
                    this.setState({nationality_country: text})
                  }
                />
                {/* Champs pour les informations parentales */}
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'user'}
                  label={I18n.t('MOTHER_LASTNAME')}
                  iconColor={'#f95a25'}
                  style={styles.input}
                  value={this.state.mother_lastname}
                  onChangeText={text => this.setState({mother_lastname: text})}
                />
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'user'}
                  label={I18n.t('MOTHER_FIRSTNAME')}
                  iconColor={'#f95a25'}
                  style={styles.input}
                  value={this.state.mother_firstname}
                  onChangeText={text => this.setState({mother_firstname: text})}
                />
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'user'}
                  label={I18n.t('FATHER_LASTNAME')}
                  iconColor={'#f95a25'}
                  style={styles.input}
                  value={this.state.father_lastname}
                  onChangeText={text => this.setState({father_lastname: text})}
                />
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'user'}
                  label={I18n.t('FATHER_FIRSTNAME')}
                  iconColor={'#f95a25'}
                  style={styles.input}
                  value={this.state.father_firstname}
                  onChangeText={text => this.setState({father_firstname: text})}
                />
                {/* Masquer les champs TECHNICAL AGREMENT et PATENTE */}
              </>
            )}

            {accountType === 'PM' && (
              <>
                {/* Champ SIGLE (commun aux deux types mais ici on le traite dans le PM) */}
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'id-badge'}
                  label={I18n.t('SIGNBOARD')}
                  iconColor={'#f95a25'}
                  style={styles.input}
                  value={this.state.signboard}
                  onChangeText={text => this.setState({signboard: text})}
                />
                {/* Champ DATE CREATION (obligatoire) */}
                {/* <Fumi
            iconClass={FontAwesomeIcon}
            iconName={'calendar'}
            label="Date de création *"
            iconColor={'#f95a25'}
            style={styles.input}
            value={this.state.entreprise_creation_date}
            onChangeText={(text) => this.setState({ entreprise_creation_date: text })}
          /> */}
                <TouchableOpacity
                  onPress={this.showDatePicker}
                  style={{
                    height: 60,
                    marginTop: responsiveHeight(2),
                    marginLeft: responsiveWidth(5),
                    marginRight: responsiveWidth(5),
                    backgroundColor: 'white',
                    padding: 10,
                    borderRadius: 5,
                  }}>
                  <View>
                    <Text style={{marginLeft: 5, marginBottom: 5}}>
                      {I18n.t('CREATION_DATE')}
                    </Text>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                      <FontAwesomeIcon
                        name="calendar"
                        size={20}
                        color="#f95a25"
                      />
                      <Text style={{marginLeft: 10}}>
                        {this.state.entreprise_creation_date.toLocaleDateString()}
                      </Text>
                    </View>
                  </View>
                </TouchableOpacity>
                {this.state.showDatePicker && (
                  <DateTimePicker
                    testID="dateTimePicker"
                    value={this.state.entreprise_creation_date}
                    mode="date"
                    display="default"
                    onChange={this.onChangeDate}
                  />
                )}
                {/* Ici, on peut conserver TECHNICAL AGREMENT et PATENTE pour PM */}
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'file'}
                  label={I18n.t('TECHNICAL_APPROVAL')}
                  iconColor={'#f95a25'}
                  style={styles.input}
                  value={this.state.technical_approval}
                  onChangeText={text =>
                    this.setState({technical_approval: text})
                  }
                />
                <Fumi
                  iconClass={FontAwesomeIcon}
                  iconName={'file'}
                  label={I18n.t('TRADE_LICENSE')}
                  iconColor={'#f95a25'}
                  style={styles.input}
                  value={this.state.id_patente}
                  onChangeText={text => this.setState({id_patente: text})}
                />
              </>
            )}
            <Animatable.View
              ref={comp => {
                this.neightborhoodAnim = comp;
              }}>
              {console.log('ICI===>>', this.state.result)}
              {console.log('ICI===>>', this.state.result.neighborhoods)}
              <FilteredList
                items={this.state.result.neighborhoods}
                placeholder={I18n.t('FIND_A_NEIGHBORHOOD')}
                onItemSelect={selectedItem => {
                  const id = parseInt(selectedItem.id, 10);
                  this.setState({neighborhood: selectedItem.name});
                }}
              />
            </Animatable.View>

            {required_taxes_only_single_tax ? (
              <Animatable.View
                ref={comp => {
                  this.ProprierteTypeAnim = comp;
                }}>
                {/* <View
                                style={{
                                    marginTop: 20,
                                    flexDirection: "row",
                                    paddingRight: 20,
                                    paddingLeft: 20,
                                }}>

                                <View style={{
                                    width: responsiveWidth(90),
                                    borderRadius: 10,
                                    alignSelf: "center",
                                    backgroundColor: 'white'
                                }}>
                                    <Dropdown
                                        label={I18n.t('TAXES_SUR_LA_PROPRETE')}
                                        data={this.state.required_taxes}
                                        useNativeDriver={true}
                                        valueExtractor={(value) => {
                                            return value
                                        }}
                                        labelExtractor={(value) => {
                                            return value.name
                                        }}
                                        onChangeText={this.handleTaxSlection}
                                    />
                                </View>
                            </View> */}
              </Animatable.View>
            ) : (
              this.state.required_taxes.map((element, index) =>
                this.renderRequiredTaxesDropdown(element, index),
              )
            )}

            {this.renderTaxesDropdown(0)}
            {this.state.tabTaxe.map(
              (element, index) => index > 0 && this.renderTaxesDropdown(index),
            )}

            {this.state.displayAddTaxeFromOtherNetwork &&
            !_.isEmpty(this.state.dataTaxesPublicite)
              ? this.renderPubliciteTaxesDropdown()
              : null}

            <Animatable.View
              ref={comp => {
                this.activityTypeAnim = comp;
              }}>
              <FilteredList
                items={this.state.result.activities}
                onItemSelect={selectedItem => {
                  this.setState({activity_type: selectedItem.name});
                }}
              />
            </Animatable.View>

            {/* <Animatable.View ref={(comp) => {
                            this.activityTypeAnim = comp
                        }}>
                            <View
                                style={{
                                    width: responsiveWidth(90),
                                    marginTop: 20,
                                    alignSelf: 'center',
                                    borderRadius: 10,
                                    paddingLeft: 20,
                                    paddingRight: 20,
                                    backgroundColor: 'white'
                                }}>
                                <Dropdown
                                    label={I18n.t('TYPE_ACTIVITE')}
                                    data={this.state.result.activities}
                                    useNativeDriver={true}
                                    valueExtractor={(value) => {
                                        return value
                                    }}
                                    labelExtractor={(value) => {
                                        return value.name
                                    }}
                                    onChangeText={(value, index, data) => {
                                        this.setState({activity_type: value.name});
                                        console.log("Company", value);
                                    }}
                                />
                            </View>
                        </Animatable.View> */}

            <Animatable.View>
              <Fumi
                iconClass={FontAwesomeIcon}
                iconName={'lock'}
                label={`${I18n.t('IMMATRICULATION_DGI')}`}
                iconColor={'#f95a25'}
                iconSize={20}
                style={styles.input}
                maxLength={14}
                keyboardType="default"
                autoCapitalize="characters"
                onChangeText={text => {
                  // Update the identification_number state
                  this.setState({
                    identification_number: text,
                    remainingCharacters: 14 - text.length, // Update the remaining characters
                  });
                }}
              />
              <Text
                style={{
                  color: 'white',
                  marginLeft: responsiveWidth(5),
                  marginTop: 5,
                }}>
                {this.state.remainingCharacters} caractères restants
              </Text>
            </Animatable.View>

            <Animatable.View>
              <Fumi
                iconClass={FontAwesomeIcon}
                iconName={'lock'}
                label={I18n.t('REGISTRE_COMMERCE')}
                iconColor={'#f95a25'}
                iconSize={20}
                style={styles.input}
                onChangeText={text => {
                  this.setState({trade_registry: text});
                }}
              />
            </Animatable.View>

            <Animatable.View>
              <Fumi
                iconClass={FontAwesomeIcon}
                iconName={'file'}
                label={I18n.t('TECHNICAL_AGREMENT')}
                iconColor={'#f95a25'}
                iconSize={20}
                style={styles.input}
                onChangeText={text => {
                  this.setState({technical_approval: text});
                }}
              />
            </Animatable.View>

            <Animatable.View
              ref={comp => {
                this.nomResponsableAnim = comp;
              }}>
              <Fumi
                iconClass={FontAwesomeIcon}
                iconName={'user-o'}
                label={`${I18n.t('NOM_RESPONSABLE')} *`}
                iconColor={'#f95a25'}
                iconSize={20}
                style={styles.input}
                onChangeText={text => {
                  this.setState({responsable_name: text});
                }}
              />
            </Animatable.View>

            <Animatable.View
              ref={comp => {
                this.municipalityAnim = comp;
              }}>
              <View
                style={{
                  width: responsiveWidth(90),
                  marginTop: 20,
                  alignSelf: 'center',
                  borderRadius: 10,
                  paddingLeft: 20,
                  paddingRight: 20,
                  backgroundColor: 'white',
                }}>
                <Dropdown
                  label={`${I18n.t('COMMUNE_SIEGE_SOCIAL')} *`}
                  data={this.state.result.municipalities}
                  useNativeDriver={true}
                  disabled={true}
                  value={this.state.municipality}
                  valueExtractor={value => {
                    return value;
                  }}
                  labelExtractor={value => {
                    return value.name;
                  }}
                  onChangeText={(value, index, data) => {
                    this.setState({municipality: value.name});
                  }}
                />
              </View>
            </Animatable.View>

            <Text style={styles.title}>{I18n.t('OTHERS_INFORMATIONS')}</Text>

            <Animatable.View
              ref={comp => {
                this.districtAnim = comp;
              }}>
              <View
                style={{
                  width: responsiveWidth(90),
                  marginTop: 20,
                  alignSelf: 'center',
                  borderRadius: 10,
                  paddingLeft: 20,
                  paddingRight: 20,
                  backgroundColor: 'white',
                }}>
                <Dropdown
                  label={`${I18n.t('ARRONDISSEMENT')} *`}
                  data={this.result.districts}
                  useNativeDriver={true}
                  disabled={true}
                  value={this.state.district}
                  valueExtractor={value => {
                    return value;
                  }}
                  labelExtractor={value => {
                    return value.name;
                  }}
                  onChangeText={(value, index, data) => {
                    this.setState({district: value.name});
                  }}
                />
              </View>
            </Animatable.View>

            {/* <Animatable.View ref={(comp) => {
                            this.neightborhoodAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon}
                                  iconName={'map-marker'}
                                  label={`${I18n.t('QUARTIER_COMMUNE')} *`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  style={styles.input}
                                  onChangeText={(text) => {
                                      this.setState({neighborhood: text})
                                  }}/>
                        </Animatable.View> */}

            {/* <Animatable.View>
                            <Fumi iconClass={FontAwesomeIcon}
                                  iconName={'file'}
                                  label={I18n.t('PATENTE')}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  style={styles.input}
                                  onChangeText={(text) => {
                                      this.setState({id_patente: text})
                                  }}/>
                        </Animatable.View> */}

            <View
              style={{
                flexDirection: 'row',
                paddingLeft: 5,
                paddingRight: 5,
                alignSelf: 'center',
                marginTop: 10,
                width: responsiveWidth(90),
              }}>
              <View style={styles.checkboxContainer}>
                <CheckBox
                  value={this.state.TVA}
                  onValueChange={value => this.setState({TVA: value})}
                  style={styles.checkbox}
                />
                <Text style={styles.label}>{I18n.t('TVA')}</Text>
              </View>

              <View style={styles.checkboxContainer}>
                <CheckBox
                  onValueChange={value => this.setState({IRPP: value})}
                  value={this.state.IRPP}
                  style={styles.checkbox}
                />
                <Text style={styles.label}>{I18n.t('IRPP')}</Text>
              </View>
              <View style={styles.checkboxContainer}>
                <CheckBox
                  onValueChange={value => this.setState({licence: value})}
                  value={this.state.licence}
                  style={styles.checkbox}
                />
                <Text style={styles.label}>Licence</Text>
                {console.log('licence===>>', this.state.licence)}
                {console.log('licence===>>', typeof this.state.licence)}
              </View>
              {/* <View
                                style={styles.checkboxContainer}>
                                <CheckBox
                                    onValueChange={value => this.setState({year_tax_paid_N: value})}
                                    value={this.state.year_tax_paid_N}
                                    style={styles.checkbox}/>
                                <Text
                                    style={styles.label}>{I18n.t('ANNEE_TAXE')} {Number(year.getFullYear() - 1)}</Text>
                            </View> */}
            </View>

            {/* <View style={{
                            flexDirection: "row",
                            paddingLeft: 5,
                            paddingRight: 5,
                            alignSelf: 'center',
                            marginTop: 5,
                            width: responsiveWidth(90)
                        }}>
                            <View
                                style={styles.checkboxContainer}>
                                <CheckBox
                                    onValueChange={value => this.setState({year_tax_paid_N_1: value})}
                                    value={this.state.year_tax_paid_N_1}
                                    style={styles.checkbox}/>
                                <Text
                                    style={styles.label}>{I18n.t('ANNEE_TAXE')} {Number(year.getFullYear() - 2)}</Text>
                            </View>
                        </View> */}

            {/* <View style={{
                            flexDirection: "row",
                            paddingLeft: 5,
                            paddingRight: 5,
                            alignSelf: 'center',
                            marginTop: 5,
                            width: responsiveWidth(90)
                        }}>
                            <View
                                style={styles.checkboxContainer}>
                                <CheckBox
                                    onValueChange={value => this.setState({year_tax_paid_N_2: value})}
                                    value={this.state.year_tax_paid_N_2}
                                    style={styles.checkbox}/>
                                <Text
                                    style={styles.label}>{I18n.t('ANNEE_TAXE')} {Number(year.getFullYear() - 3)}</Text>
                            </View>
                        </View> */}
          </>

          <Button
            style={styles.btnvalide}
            textStyle={styles.textbtnvalide}
            isLoading={this.state.isLoading || this.props.loading}
            onPress={() => {
              this.checkUserGeolocated();
            }}>
            {this.state.isActif
              ? I18n.t('CREATE_ACTIF')
              : I18n.t('CREATE_ACCOUNT')}
          </Button>
        </ScrollView>
        <MaterialDialog
          title={'Selecionner un reseau'}
          items={LONG_LIST.map((row, index) => ({value: row, label: row}))}
          visible={this.state.networksinglePickerVisible}
          selectedItem={this.state.singlePickerSelectedItem}
          onCancel={() => this.setState({networksinglePickerVisible: false})}
          onOk={result => {
            this.setState({networksinglePickerVisible: false});
            this.setState({singlePickerSelectedItem: result.selectedItem});
          }}>
          <FlatList
            style={{height: responsiveHeight(40)}}
            data={this.state.networks}
            renderItem={({item}) => this.renderRow(item)}
          />
        </MaterialDialog>
      </View>
    );
  }

  renderActifAccount() {
    return (
      <View style={styles.container}>
        {this.prepareModal()}
        {this.state.displayImage && this.renderDialogImage()}
        {this.state.loadingUpload && this.renderLoader()}
        {this.state.isDataSubmit && this.renderCreateActifResponse()}
        <View style={{flexDirection: 'row'}}>
          <Icon.Button
            name={'keyboard-backspace'}
            color={'white'}
            size={24}
            backgroundColor={theme.primary}
            onPress={() => this.props.navigation.pop()}
          />
          <Text style={styles.bigtitle}>{I18n.t('LAST_STEP')}</Text>
        </View>
        <ScrollView style={styles.container}>
          <>
            <Text style={styles.title}>
              {I18n.t('INFORMATION_FICHE_CIRCUIT')}
            </Text>

            <Animatable.View ref={comp => (this.nomSocieteAnim = comp)}>
              <View
                style={{
                  width: responsiveWidth(90),
                  marginTop: 20,
                  alignSelf: 'center',
                  borderRadius: 10,
                  paddingLeft: 20,
                  paddingRight: 20,
                  backgroundColor: 'white',
                }}>
                <Dropdown
                  label={I18n.t('NOM_SOCIETE')}
                  data={
                    this.state.result !== null
                      ? this.state.result.companies
                      : []
                  }
                  useNativeDriver={true}
                  valueExtractor={value => {
                    return value;
                  }}
                  labelExtractor={value => {
                    return value.name;
                  }}
                  onChangeText={(value, index, data) => {
                    this.setState({companies_types_selected: value.id});
                    //this.updateRequiredTaxes(value);
                    //console.log("Company", value);
                  }}
                />
              </View>
            </Animatable.View>

            {this.renderTaxesEntreprisesDropdown(0)}
            {this.state.tabTaxe.map(
              (element, index) =>
                index > 0 && this.renderTaxesEntreprisesDropdown(index),
            )}
          </>

          <Button
            style={styles.btnvalide}
            textStyle={styles.textbtnvalide}
            isLoading={this.props.isLoading}
            onPress={() => {
              this.setState({isDataSubmit: true});
              this.checkUserGeolocated();
            }}>
            {this.state.isActif
              ? I18n.t('CREATE_ACTIF')
              : I18n.t('CREATE_ACCOUNT')}
          </Button>
        </ScrollView>
        <MaterialDialog
          title={'Selecionner un reseau'}
          items={LONG_LIST.map((row, index) => ({value: row, label: row}))}
          visible={this.state.networksinglePickerVisible}
          selectedItem={this.state.singlePickerSelectedItem}
          onCancel={() => this.setState({networksinglePickerVisible: false})}
          onOk={result => {
            this.setState({networksinglePickerVisible: false});
            this.setState({singlePickerSelectedItem: result.selectedItem});
          }}>
          <FlatList
            style={{height: responsiveHeight(40)}}
            data={this.state.networks}
            renderItem={({item}) => this.renderRow(item)}
          />
        </MaterialDialog>
      </View>
    );
  }

  onRowPress(rowID) {
    this.setState({network: rowID});
  }

  renderRow = row => (
    <TouchableOpacity key={row} onPress={() => this.onRowPress(row)}>
      <View style={styles.rowContainer}>
        <View style={styles.iconContainer}>
          <Icon
            name={
              this.state.network && row.name === this.state.network.name
                ? 'radio-button-checked'
                : 'radio-button-unchecked'
            }
            color={
              this.state.network && row.name === this.state.network.name
                ? theme.accent
                : this.props.colorAccent
            }
            size={24}
          />
        </View>
        <Text style={material.subheading}>{row.name}</Text>
      </View>
    </TouchableOpacity>
  );

  checkIfAllImagesIsOk(data) {
    let message = '';
    let isOk = true;
    data['taxes'].map(taxe => {
      // console.log("Taxes map", taxe);
      if (taxe.has_image_capture === '1') {
        if (_.isNil(taxe.image)) {
          isOk = false;
          message += `${I18n.t('TAXE_REQUIRED_IMAGE')} ${taxe.name}`;
        }
      }
    });
    if (data.hasOwnProperty('secondary_taxes')) {
      data['secondary_taxes'].map(taxe => {
        console.log('Secondary Taxes map', taxe);
        if (_.isNil(taxe.image)) {
          isOk = false;
          message += `${I18n.t('TAXE_REQUIRED_IMAGE')} ${taxe.name}`;
        }
      });
    }
    console.log('Message erreur image', message);
    this.setState({messageRequiredImage: message});

    return isOk;
  }

  checkIfAllImagesIsOkForActif(data) {
    let message = '';
    let isOk = true;
    data.map(taxe => {
      console.log('Taxes map', taxe);
      if (taxe.has_image_capture === '1') {
        if (_.isNil(taxe.image)) {
          isOk = false;
          message += `${I18n.t('TAXE_REQUIRED_IMAGE')} ${taxe.name}`;
        }
      }
    });
    this.setState({messageRequiredImage: message});

    return isOk;
  }

  submitUsagerOffline(data) {
    getData(usagerToSave).then(resultGet => {
      let usagerArray = new Array();
      console.log('DATA FROM ASYNC STORAGE', resultGet);

      if (_.isNil(resultGet)) {
        usagerArray.push({
          data,
          isSaved: false,
        });
      } else {
        usagerArray = JSON.parse(resultGet);
        if (usagerArray.length <= 10) {
          usagerArray.push({
            data,
            isSaved: false,
          });
        }
      }

      if (usagerArray.length === 10) {
        Alert.alert('', I18n.t('LIMITE_USAGER_LOCAL_ATTEINTE'), [
          {
            text: 'Ok',
            onPress: () => {
              this.props.navigation.popToTop();
            },
          },
        ]);
      } else {
        storeData(usagerToSave, JSON.stringify(usagerArray)).then(() => {
          Alert.alert('', I18n.t('USAGER_SAVED_SUCCESSFULLY'), [
            {
              text: 'Ok',
              onPress: () => {
                this.setState({isLoading: false});
                this.props.navigation.popToTop();
              },
            },
          ]);
        });
      }
    });
  }

  // getTownValue(key, defaultValue = "") {
  //     return this.state.town && this.state.town[key] ? this.state.town[key] : defaultValue;
  //   }
  checkUserGeolocated() {
    let {
      myPosition,
      textaddress,
      place,
      indicatif,
      user,
      network,
      phone,
      phoneTransaction,
    } = this.state;
    this.setState({isLoading: true});
    console.log('isActif===>>', this.state.isActif);
    if (this.state.isActif) {
      let taxes_to_send = [];
      console.log('Taxes to send', this.state.taxes_selected);
      for (let i = 0; i < this.state.tabTaxe.length; i++) {
        if (this.state.taxes_selected[i] !== undefined) {
          if (this.state.taxes_selected[i].has_image_capture === '1') {
            taxes_to_send.push({
              has_image_capture: '1',
              latitude: this.isOffline
                ? this.state.latitude
                : this.state.taxes_selected[i].latitude,
              longitude: this.isOffline
                ? this.state.longitude
                : this.state.taxes_selected[i].longitude,
              image: this.state.taxes_selected[i].image,
              name: this.state.taxes_selected[i].name,
              id_network_tax: this.state.taxes_selected[i].id,
              tax_units_count: isNil(this.state.tax_units_count[i])
                ? null
                : this.state.tax_units_count[i],
              units_per_tax_unit_count: isNil(
                this.state.units_per_tax_unit_count[i],
              )
                ? null
                : this.state.units_per_tax_unit_count[i],
              number_of_days: isNil(this.state.number_of_days[i])
                ? null
                : this.state.number_of_days[i],
              neighborhood: this.state.taxes_selected[i].neighborhood,
              district: this.state.taxes_selected[i].district,
            });
          } else {
            taxes_to_send.push({
              has_image_capture: '0',
              latitude: this.isOffline
                ? this.state.latitude
                : this.state.taxes_selected[i].latitude,
              longitude: this.isOffline
                ? this.state.longitude
                : this.state.taxes_selected[i].longitude,
              id_network_tax: this.state.taxes_selected[i].id,
              name: this.state.taxes_selected[i].name,
              tax_units_count: isNil(this.state.tax_units_count[i])
                ? null
                : this.state.tax_units_count[i],
              units_per_tax_unit_count: isNil(
                this.state.units_per_tax_unit_count[i],
              )
                ? null
                : this.state.units_per_tax_unit_count[i],
              number_of_days: isNil(this.state.number_of_days[i])
                ? null
                : this.state.number_of_days[i],
              neighborhood: this.state.taxes_selected[i].neighborhood,
              district: this.state.taxes_selected[i].district,
            });
          }
        }
      }

      if (this.isOffline) {
        if (this.checkOrShake(this.state.taxes_selected[0], this.taxesAnim)) {
          if (
            this.checkOrAlert(
              this.checkIfArrayValueIsNull(
                this.state.taxes_selected,
                'district',
              ),
              `${I18n.t('THE_FIELD')} ${I18n.t('DISTRICT')} ${I18n.t(
                'IS_REQUIRED',
              )}`,
              false,
            )
          ) {
            if (
              this.checkOrShake(
                this.state.companies_types_selected,
                this.nomSocieteAnim,
                false,
              )
            ) {
              if (
                this.checkOrAlert(
                  this.checkIfArrayValueIsNull(
                    this.state.taxes_selected,
                    'neighborhood',
                  ),
                  `${I18n.t('THE_FIELD')} ${I18n.t('NEIGHTBORHOOD')} ${I18n.t(
                    'IS_REQUIRED',
                  )}`,
                  false,
                )
              ) {
                getData(actifToSave).then(resultGet => {
                  let actifArray = new Array();
                  console.log('DATA FROM ASYNC STORAGE', resultGet);
                  if (_.isNil(resultGet)) {
                    actifArray.push({
                      data: {
                        id_network_super: this.state.result.id_network_super,
                        id_company: this.state.companies_types_selected,
                        district: this.state.district,
                        neighborhood: this.state.neighborhood,
                        taxes: taxes_to_send,
                      },
                      isSaved: false,
                    });
                  } else {
                    actifArray = JSON.parse(resultGet);
                    if (actifArray.length <= 10) {
                      actifArray.push({
                        data: {
                          id_network_super: this.state.result.id_network_super,
                          id_company: this.state.companies_types_selected,
                          district: this.state.district,
                          neighborhood: this.state.neighborhood,
                          taxes: taxes_to_send,
                        },
                        isSaved: false,
                      });
                    }
                  }

                  if (actifArray.length === 10) {
                    Alert.alert('', I18n.t('LIMITE_ACTIF_LOCAL_ATTEINTE'), [
                      {
                        text: 'Ok',
                        onPress: () => {
                          this.props.navigation.popToTop();
                        },
                      },
                    ]);
                  } else {
                    if (
                      this.checkIfAllImagesIsOkForActif(
                        this.state.taxes_selected,
                      )
                    ) {
                      storeData(actifToSave, JSON.stringify(actifArray)).then(
                        () => {
                          Alert.alert('', I18n.t('ACTIF_SAVED_SUCCESSFULLY'), [
                            {
                              text: 'Ok',
                              onPress: () => {
                                this.props.navigation.popToTop();
                              },
                            },
                          ]);
                        },
                      );
                    } else {
                      Alert.alert(
                        I18n.t('ERROR_LABEL'),
                        this.state.messageRequiredImage,
                        [
                          {
                            text: 'Ok',
                            onPress: () => {
                              this.setState({isLoading: false});
                            },
                          },
                        ],
                      );
                    }
                  }
                });
              } else this.setState({isLoading: false});
            } else this.setState({isLoading: false});
          } else this.setState({isLoading: false});
        } else this.setState({isLoading: false});
      } else {
        this.props.saveActifSocietyAction({
          id_network_super: this.state.result.id_network_super,
          id_company: this.state.companies_types_selected,
          district: this.state.district,
          neighborhood: this.state.neighborhood,
          taxes: taxes_to_send,
        });
      }
    } else {
      if (user !== undefined) {
        const addIndicatif = phone => {
          const indicatif = '+237';
          return phone.startsWith(indicatif) ? phone : indicatif + phone;
        };

        var data = {};
        data.tag = 'member';
        data.type = 'create_geolocated_user';
        data['phone'] = addIndicatif(
          this.state.data.phone.replace('undefined', ''),
        );
        data['phone_transaction'] = addIndicatif(
          this.state.data.phone_transaction.replace('undefined', ''),
        );
        data['network'] = this.state.data.network;
        data['id_network_tax'] = this.state.data.network.id;
        data['town'] = this.isOffline ? null : this.state.town;
        if (this.state.town && typeof this.state.town === 'object') {
          data['town'] = {
            name: this.state.municipality || '',
            id: this.state.town.id || '',
            indicatif: '+237' || '',
            districts: Array.isArray(this.state.result.districts)
              ? this.state.result.districts
              : [],
          };
        } else {
          data['town'] = null;
        }
        // Utilisation :
        // data['town'] = {
        //     name: this.getTownValue('name'),
        //     id: this.getTownValue('id'),
        //     indicatif: this.getTownValue('indicatif'),
        //     districts: this.getTownValue('districts', [])
        // };

        let taxes_to_send = [];
        for (let i = 0; i < this.state.tabTaxe.length; i++) {
          if (this.state.taxes_selected[i] !== undefined) {
            if (this.state.taxes_selected[i].has_image_capture === '1') {
              taxes_to_send.push({
                has_image_capture: '1',
                image: this.state.taxes_selected[i].image,
                name: this.state.taxes_selected[i].name,
                id_network_tax: this.state.taxes_selected[i].id,
                number_of_days: isNil(this.state.number_of_days[i])
                  ? null
                  : this.state.number_of_days[i],
                tax_units_count: isNil(this.state.tax_units_count[i])
                  ? null
                  : this.state.tax_units_count[i],
                units_per_tax_unit_count: isNil(
                  this.state.units_per_tax_unit_count[i],
                )
                  ? null
                  : this.state.units_per_tax_unit_count[i],
                building_value: isNil(this.state.building_value[i])
                  ? null
                  : this.state.building_value[i],
                built: isNil(this.state.built[i]) ? null : this.state.built[i],
              });
            } else {
              taxes_to_send.push({
                has_image_capture: '0',
                id_network_tax: this.state.taxes_selected[i].id,
                name: this.state.taxes_selected[i].name,
                number_of_days: isNil(this.state.number_of_days[i])
                  ? null
                  : this.state.number_of_days[i],
                tax_units_count: isNil(this.state.tax_units_count[i])
                  ? null
                  : this.state.tax_units_count[i],
                units_per_tax_unit_count: isNil(
                  this.state.units_per_tax_unit_count[i],
                )
                  ? null
                  : this.state.units_per_tax_unit_count[i],
                building_value: isNil(this.state.building_value[i])
                  ? null
                  : this.state.building_value[i],
                built: isNil(this.state.built[i]) ? null : this.state.built[i],
              });
            }
          }
        }

        if (this.state.publicites_taxes !== null) {
          let publicites_taxes = new Array();
          publicites_taxes.push({
            ...this.state.publicites_taxes,
            id_network_tax: this.state.publicites_taxes.id,
          });
          data['secondary_taxes'] = publicites_taxes;
        }

        data['taxes'] = taxes_to_send;
        data['required_taxes'] = this.state.required_taxes.filter(
          (element, i) => element.id_network_tax === this.state.selectedTax?.id,
        );
        //data['required_taxes'] = this.state.required_taxes;
        data['id_company_type'] = this.state.companies_types_selected;
        data['identification_number'] = this.state.identification_number;
        data['trade_registry'] = this.state.trade_registry;
        data['responsable_name'] = this.state.responsable_name;
        data['technical_approval'] = this.state.technical_approval;
        data['municipality'] = this.state.municipality;
        data['municipality'] = this.state.municipality;
        data['neighborhood'] = this.state.neighborhood;
        data['district'] = this.state.district;
        data['id_patente'] = this.state.id_patente;
        data['TVA'] = this.state.TVA;
        data['IRPP'] = this.state.IRPP;
        data['licence'] = this.state.licence;
        data['activity_type'] = this.state.activity_type;
        data['year_tax_paid_N_1'] = this.state.year_tax_paid_N;
        data['year_tax_paid_N_2'] = this.state.year_tax_paid_N_1;
        data['year_tax_paid_N_3'] = this.state.year_tax_paid_N_2;
        data['latitude'] = this.state.data.latitude;
        data['longitude'] = this.state.data.longitude;
        data['player_id'] = this.state.player_id;
        data['accountType'] = this.state.accountType;

        data['cni_number'] = this.state.cni_number;
        data['birth_date'] = this.state.birth_date;
        data['birth_place'] = this.state.birth_place;
        data['birth_country'] = this.state.birth_country;
        data['nationality_country'] = this.state.nationality_country;
        data['father_lastname'] = this.state.father_lastname;
        data['father_firstname'] = this.state.father_firstname;
        data['mother_lastname'] = this.state.mother_lastname;
        data['mother_firstname'] = this.state.mother_firstname;

        data['signboard'] = this.state.signboard;
        data['entreprise_creation_date'] = this.state.entreprise_creation_date;
        for (let i in user) {
          data[i] = user[i];
        }
        data['category'] = user.category;

        data['active'] = '0';
        // Ajout de la logique conditionnelle pour vider les champs en fonction du type de compte.
        if (this.state.accountType === 'PP') {
          // Pour une personne physique, on s'assure que les champs spécifiques à une personne morale soient à null.
          data['signboard'] = null;
          data['entreprise_creation_date'] = null;
          data['technical_approval'] = null;
          data['id_patente'] = null;
        } else if (this.state.accountType === 'PM') {
          // Pour une personne morale, on met à null les champs spécifiques à une personne physique.
          data['cni_number'] = null;
          data['birth_date'] = null;
          data['birth_place'] = null;
          data['birth_country'] = null;
          data['nationality_country'] = null;
          data['father_lastname'] = null;
          data['father_firstname'] = null;
          data['mother_lastname'] = null;
          data['mother_firstname'] = null;
        }
        console.log('DATA TO SEND CONVERT', data);

        let idsNetworksGroup1 = ['15', '16', '21', '17'];
        let idsNetworksGroup3 = ['14'];
        const isPP = this.state.accountType === 'PP';
        const isPM = this.state.accountType === 'PM';

        if (this.isOffline) {
          console.log('STATE', this.state);

          if (
            (this.state.data.network.id !== '15' &&
              this.checkOrAlert(
                this.state.taxes_selected[0],
                `${I18n.t('THE_FIELD')} ${I18n.t('TAXE')} ${I18n.t(
                  'IS_REQUIRED',
                )}`,
                true,
              )) ||
            (this.state.data.network.id === '15' &&
              !this.checkOrAlert(
                this.state.taxes_selected[0],
                `${I18n.t('TAXE')} ${I18n.t('IS_REQUIRED')}`,
                true,
              ))
          ) {
            if (
              this.checkOrAlert(
                this.state.companies_types_selected,
                `${I18n.t('THE_FIELD')} ${I18n.t('SOCIETY_TYPE')} ${I18n.t(
                  'IS_REQUIRED',
                )}`,
                true,
              )
            ) {
              if (
                this.state.data.network.id !== '14' &&
                this.checkOrAlert(
                  this.state.activity_type,
                  `${I18n.t('THE_FIELD')} ${I18n.t('TYPE_ACTIVITE')} ${I18n.t(
                    'IS_REQUIRED',
                  )}`,
                  false,
                )
              ) {
                if (
                  this.state.data.network.id !== '14' &&
                  this.checkOrAlert(
                    this.state.municipality,
                    `${I18n.t('THE_FIELD')} ${I18n.t('MUNICIPALITY')} ${I18n.t(
                      'IS_REQUIRED',
                    )}`,
                    false,
                  )
                ) {
                  if (
                    this.checkOrAlert(
                      this.state.responsable_name,
                      `${I18n.t('THE_FIELD')} ${I18n.t(
                        'NOM_RESPONSABLE',
                      )} ${I18n.t('IS_REQUIRED')}`,
                      false,
                    )
                  ) {
                    if (
                      this.checkOrAlert(
                        this.state.district,
                        `${I18n.t('THE_FIELD')} ${I18n.t('DISTRICT')} ${I18n.t(
                          'IS_REQUIRED',
                        )}`,
                        false,
                      )
                    ) {
                      if (
                        this.checkOrAlert(
                          this.state.neighborhood,
                          `${I18n.t('THE_FIELD')} ${I18n.t(
                            'NEIGHTBORHOOD',
                          )} ${I18n.t('IS_REQUIRED')}`,
                          false,
                        )
                      ) {
                        /* ----------  NOUVEAUX CHAMPS OBLIGATOIRES  ---------- */
                        const isPP = this.state.accountType === 'PP';
                        const isPM = this.state.accountType === 'PM';
                        console.log(
                          'isPP isPM',
                          this.state.accountType,
                          isPP,
                          isPM,
                        );

                        if (
                          (isPP && // Personne Physique
                            this.checkOrAlert(
                              this.state.birth_date,
                              `${I18n.t('THE_FIELD')} ${I18n.t(
                                'BIRTH_DATE',
                              )} ${I18n.t('IS_REQUIRED')}`,
                              false,
                            ) &&
                            this.checkOrAlert(
                              this.state.birth_place,
                              `${I18n.t('THE_FIELD')} ${I18n.t(
                                'BIRTH_PLACE',
                              )} ${I18n.t('IS_REQUIRED')}`,
                              false,
                            ) &&
                            this.checkOrAlert(
                              this.state.birth_country,
                              `${I18n.t('THE_FIELD')} ${I18n.t(
                                'BIRTH_COUNTRY',
                              )} ${I18n.t('IS_REQUIRED')}`,
                              false,
                            ) &&
                            this.checkOrAlert(
                              this.state.nationality_country,
                              `${I18n.t('THE_FIELD')} ${I18n.t(
                                'NATIONALITY_FORM',
                              )} ${I18n.t('IS_REQUIRED')}`,
                              false,
                            ) &&
                            this.checkOrAlert(
                              this.state.mother_lastname,
                              `${I18n.t('THE_FIELD')} ${I18n.t(
                                'MOTHER_LASTNAME',
                              )} ${I18n.t('IS_REQUIRED')}`,
                              false,
                            ) &&
                            this.checkOrAlert(
                              this.state.father_lastname,
                              `${I18n.t('THE_FIELD')} ${I18n.t(
                                'FATHER_LASTNAME',
                              )} ${I18n.t('IS_REQUIRED')}`,
                              false,
                            )) ||
                          (isPM && // Personne Morale
                            this.checkOrAlert(
                              this.state.signboard,
                              `${I18n.t('THE_FIELD')} ${I18n.t(
                                'SIGNBOARD',
                              )} ${I18n.t('IS_REQUIRED')}`,
                              false,
                            ))
                        ) {
                          /* ----------  VALIDATIONS OK, ON CONTINUE  ---------- */

                          if (this.checkIfAllImagesIsOk(data)) {
                            if (!this.state.addNewTaxeOdtp) {
                              if (this.state.data.network.id === '18') {
                                Alert.alert(
                                  '',
                                  I18n.t('DO_YOU_WANT_TO_ADD_ANOTHER_TAXES'),
                                  [
                                    {
                                      text: I18n.t('YES'),
                                      onPress: () => {
                                        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 {
                                              const codeSupervisorsData =
                                                JSON.parse(codeSupervisor);
                                              let dataTaxesPublicite = {};
                                              Object.entries(
                                                codeSupervisorsData,
                                              ).forEach(entry => {
                                                if (
                                                  entry[1].network.id === '19'
                                                ) {
                                                  dataTaxesPublicite = entry[1];
                                                }
                                              });
                                              this.setState({
                                                dataTaxesPublicite,
                                              });
                                            }
                                          },
                                        );

                                        this.setState({
                                          addNewTaxeOdtp: true,
                                          displayAddTaxeFromOtherNetwork: true,
                                          isLoading: false,
                                        });
                                        this._scrollView.scrollTo(0);
                                      },
                                    },
                                    {
                                      text: I18n.t('NO'),
                                      onPress: () =>
                                        this.submitUsagerOffline(data),
                                    },
                                  ],
                                );
                              } else {
                                this.submitUsagerOffline(data);
                              }
                            } else {
                              if (
                                this.checkOrAlert(
                                  this.state.publicites_taxes,
                                  `${I18n.t('THE_FIELD')} ${I18n.t(
                                    'TAXES_SUR_LA_PUBLICITE',
                                  )} ${I18n.t('IS_REQUIRED')}`,
                                  true,
                                )
                              ) {
                                this.submitUsagerOffline(data);
                              } else {
                                this.setState({isLoading: false});
                              }
                            }
                          } else {
                            Alert.alert(
                              I18n.t('ERROR_LABEL'),
                              I18n.t('TAXES_REQUIRED_IMAGE'),
                              [
                                {
                                  text: 'Ok',
                                  onPress: () =>
                                    this.setState({isLoading: false}),
                                },
                              ],
                            );
                          }
                        } else {
                          this.setState({isLoading: false}); // PP / PM manquant
                        }
                      } else this.setState({isLoading: false}); // neighborhood
                    } else this.setState({isLoading: false}); // district
                  } else this.setState({isLoading: false}); // responsable_name
                } else this.setState({isLoading: false}); // municipality
              } else this.setState({isLoading: false}); // activity_type
            } else this.setState({isLoading: false}); // companies_types_selected
          } else this.setState({isLoading: false}); // taxes_selected[0]
        } else {
          console.log('here===>>', JSON.stringify(data, null, 2));
          createGeolocatedAccount(data)
            .then(result => {
              console.log('here2===>>', result);
              if (result.success !== undefined && result.success === 1) {
                const message =
                  result.category === 'super'
                    ? I18n.t('HYPERVISOR_MUST_VALIDATE_SUPERVISOR')
                    : I18n.t('ACCOUNT_SUCCESSFULL_CREATED');
                Alert.alert('', message, [
                  {
                    text: 'Ok',
                    onPress: () => {
                      this.props.navigation.popToTop();
                    },
                  },
                ]);
                setTimeout(() => {
                  this.setState({isLoading: false});
                }, 1000);
                this.props.navigator.push({
                  screen: route.login,
                });
                this.setState({isLoading: false});
              } else {
                if (result.error !== undefined) {
                  switch (result.error) {
                    case -3:
                      Alert.alert('', I18n.t('UNABLE_TO_CREATE_ACCOUNT'), [
                        {
                          text: 'Ok',
                          onPress: () => {},
                        },
                      ]);
                      break;
                    default:
                      if (result.error_msg)
                        Alert.alert('', result.error_msg, [
                          {
                            text: 'Ok',
                            onPress: () => {},
                          },
                        ]);
                      else if (result.sql_error)
                        Alert.alert(
                          I18n.t('UNABLE_TO_CREATE_ACCOUNT'),
                          result.sql_error,
                          [
                            {
                              text: 'Ok',
                              onPress: () => {},
                            },
                          ],
                        );
                  }
                  this.setState({isLoading: false});
                }
              }
            })
            .catch(error => {
              this.setState({isLoading: false});
            });
        }
      } else {
        this.setState({isLoading: false});
      }
    }
  }

  checkOrShake(champ, view, scroll = false) {
    let res = !_.isNil(champ);
    console.log(
      'CheckOrShake field condition',
      res,
      'Animatable view',
      view,
      'scrollTo',
      scroll,
    );
    if (!res) {
      if (view !== undefined) view.shake(800);
    }

    if (scroll) this._scrollView.scrollTo(0);
    return res;
  }

  checkOrAlert(champ, message, scroll = false) {
    let res = !_.isNil(champ);
    if (!res) {
      Alert.alert(I18n.t('ERROR_LABEL'), message, [
        {
          text: 'Ok',
          onPress: () => {
            this.setState({isLoading: false});
          },
        },
      ]);
    }

    if (scroll) this._scrollView.scrollTo(0);
    return res;
  }

  checkIfArrayValueIsNull(tab, key) {
    let size = 0;
    tab.map(value => {
      if (!_.isNil(value[key])) size++;
    });
    if (size === tab.length) return ' ';
    else return null;
  }

  prepareModal() {
    return (
      <MaterialDialog
        visible={this.state.modalVisible}
        title={I18n.t('LOADING_INFO')}>
        <View style={{justifyContent: 'center', alignItems: 'center'}}>
          <Text>{I18n.t('LOADING_DESCRIPTION_COUNTRY')}</Text>
          <ProgressBarAndroid />
        </View>
      </MaterialDialog>
    );
  }

  render() {
    return (
      <>
        {this.state.isActif
          ? this.renderActifAccount()
          : this.renderUserGeoAccount()}
      </>
    );
  }
}

const maptStateToProps = state => ({
  loading: state.saveActifSocietyReducer.loading,
  result: state.saveActifSocietyReducer.result,
  error: state.saveActifSocietyReducer.error,
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      saveActifSocietyAction,
      saveActifSocietyReset,
    },
    dispatch,
  );

export default connect(maptStateToProps, mapDispatchToProps)(CreateUserStep);

const LONG_LIST = [
  'List element 1',
  'List element 2',

  'List element 5',
  'List element 6',
  'List element 7',
  'List element 8',
  ,
];

const styles = StyleSheet.create({
  rowContainer: {
    height: 52,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  iconContainer: {
    marginRight: 16,
  },
  container: {
    flex: 1,
    backgroundColor: theme.primary,
  },
  checkboxContainer: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  checkbox: {
    alignSelf: 'center',
    color: 'white',
  },
  label: {
    margin: 8,
    color: 'white',
  },
  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,
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    margin: 10,
    color: 'white',
  },
  map: {
    height: 200,
    marginRight: responsiveWidth(5),
    marginLeft: responsiveWidth(5),
    marginVertical: 10,
  },
  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,
  },
  contentPicker: {
    padding: 10,
    borderRadius: 8,
    flex: 1,
    alignItems: 'center',
  },
  contain: {flexDirection: 'row'},
  thumb: {
    borderRadius: 30,
    marginRight: 10,
  },
  point: {
    width: 25,
    height: 25,
    borderRadius: 11,
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    right: 9,
    bottom: 0,
  },
});