import React, {useEffect, useState} from 'react';
import {
  SafeAreaView,
  TouchableOpacity,
  Image,
  Text,
  View,
  Modal,
  TextInput,
  ScrollView,
  ImageBackground,
  Animated,
} from 'react-native';
import TextInputComponent from '../../components/TextInputComponent';
import {
  IMAGES,
  IconProfile,
  IconSocial,
  IcNotificationList,
} from '../../values/images';
import string from '../../values/string';
import strings from '../../values/string';
import styles from './style';
import Moment from 'moment';
import ButtonComponent from '../../components/ButtonComponent';
import {Menu, MenuItem} from 'react-native-material-menu';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import SelectDropdown from 'react-native-select-dropdown';
import Alert from 'react-native-awesome-alerts';
import {SwipeListView} from 'react-native-swipe-list-view';
import {GestureHandlerRootView, Swipeable} from 'react-native-gesture-handler';
import Swiper from 'react-native-swiper';
const ProfileScreen = ({
  userDetails,
  contactUser,
  btnAvailable,
  isEditField,
  navigateMain,
  setEditField,
  setBtnAvailable,
  infoUser,
  setInfoUser,
  onSaveInfo,
  avatar,
  onDeniedAvatar,
  onConfirmAvatar,
  showMenu,
  hideMenu,
  visibleMenu,
  openGallery,
  isSlideShow,
  showFullScreen,
  hideFullScreen,
  dateTimePicker,
  hideDateTimePicker,
  setDateTimePicker,
  showAlert,
  onSubmitChangeContactUser,
  onChangeDropDownContactUser,
  onChangeInputContactUser,
  onPressDeleteItem,
  onPressAddItem,
  onCancelAlert,
  modalVisible,
  setModalVisible,
  setUserInputContact,
  userInputContact,
  onSubmitCreateNew,
  onConfirmDeleteAlert,
  navigateToLogout,
  onChangeCoverAvatar,
}) => {
  //console.log("userDetails", userDetails)

  const Socials = [
    'FACEBOOK',
    'EMAIL',
    'SKYPE',
    'LINKEDIN',
    'TWITTER',
    'INSTAGRAM',
    'WHATSAPP',
    'VIPER',
    'SNAPCHAT',
    'TELEGRAM',
    'APPLE',
    'YOUTUBE',
    'PINTEREST',
  ];
  const gender = ['Nam', 'Nữ'];
  const renderRightActions = (dragX, item) => {
    const trans = dragX.interpolate({
      inputRange: [0, 100],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    });
    return (
      <Animated.Text
        style={[
          styles.actionText,
          {
            transform: [{translateX: trans}],
          },
        ]}>
        <ButtonComponent
          style={styles.hiddenItem}
          onPress={() => onPressDeleteItem(item)}
          iconSource={IcNotificationList.IcTrash}
          styleIcon={{width: 20, height: 20}}
        />
      </Animated.Text>
    );
  };
  return (
    <SafeAreaView style={styles.container}>
      {isSlideShow && (
        <TouchableOpacity
          onPress={hideFullScreen}
          style={styles.viewFullScreen}>
          <ButtonComponent
            style={styles.btnClose}
            iconSource={IconProfile.IcCloseBlack}
            styleIcon={styles.imgClose}
            onPress={hideFullScreen}
          />
          {avatar ? (
            <Image
              source={{uri: avatar[0].uri}}
              style={styles.imgAvatarFullScreen}
            />
          ) : (
            <Image
              source={{uri: 'https://meu.anawork.com' + userDetails.avatar}}
              style={styles.imgAvatarFullScreen}
            />
          )}
        </TouchableOpacity>
      )}
      <ScrollView nestedScrollEnabled={true}>
        <Swiper
          style={{height: 390, padding: 10}}
          showsButtons={false}
          loop={false}
          showsPagination={true}
          activeDot={
            <View
              style={{
                backgroundColor: '#007aff',
                width: 25,
                height: 8,
                borderRadius: 4,
              }}
            />
          }>
          <View style={styles.viewImageProfile}>
            <ImageBackground
              source={
                (userDetails.cover_image && {
                  uri: 'https://meu.anawork.com' + userDetails.cover_image,
                }) ||
                IMAGES.ImageCoverBg
              }
              style={styles.coverImage}>
              <ButtonComponent
                iconSource={IMAGES.IcChangeCoverImage}
                styleIcon={{height: 20, width: 20}}
                style={{marginRight: 15, marginBottom: 10}}
                onPress={onChangeCoverAvatar}
              />
            </ImageBackground>
            <TouchableOpacity onPress={showMenu} style={styles.viewAvatar}>
              {avatar ? (
                <Image source={{uri: avatar[0].uri}} style={styles.imgAvatar} />
              ) : (
                <Image
                  source={{uri: 'https://meu.anawork.com' + userDetails.avatar}}
                  style={styles.imgAvatar}
                />
              )}

              {/* menu option */}
              <View style={{justifyContent: 'center', alignItems: 'center'}}>
                <Menu
                  visible={visibleMenu}
                  // anchor={<Text onPress={showMenu}>Show menu</Text>}
                  onRequestClose={hideMenu}>
                  <MenuItem onPress={showFullScreen}>Xem ảnh đại diện</MenuItem>
                  <MenuItem onPress={openGallery}>Đổi hình nền</MenuItem>
                </Menu>
              </View>
            </TouchableOpacity>
            {isEditField.avatar && (
              <View
                style={{flexDirection: 'row', justifyContent: 'space-around'}}>
                <TouchableOpacity onPress={onDeniedAvatar}>
                  <Image
                    source={IMAGES.IcDenied}
                    style={{width: 25, height: 25}}
                  />
                </TouchableOpacity>
                <TouchableOpacity onPress={onConfirmAvatar}>
                  <Image
                    source={IMAGES.IcCheckMark}
                    style={{width: 25, height: 25}}
                  />
                </TouchableOpacity>
              </View>
            )}
            <Text style={{color: 'black', fontSize: 18}}>
              {`${userDetails.first_name} ${
                userDetails.middle_name ? userDetails.middle_name : ''
              } ${userDetails.last_name} (${userDetails.employee_code})`}{' '}
            </Text>
            <Text style={{marginBottom: 20}}>{userDetails.position}</Text>
          </View>
          {/**Card Info */}
          <ImageBackground
            source={IMAGES.BgProfileCard}
            style={[
              styles.viewCardProfile,
              {
                borderRadius: 10,
                paddingTop: 20,
                paddingBottom: 10,
              },
            ]}
            resizeMode="cover">
            <View style={{position: 'absolute', left: 15, top: 10}}>
              <Image
                source={IMAGES.ImageQrCode}
                style={{height: 45, width: 45}}
              />
            </View>
            <ImageBackground source={IMAGES.BgFrame} style={styles.imgFrame}>
              <Image
                source={{uri: 'https://meu.anawork.com' + userDetails.avatar}}
                style={{
                  width: 100,
                  height: 100,
                  resizeMode: 'contain',
                  alignSelf: 'center',
                  borderRadius: 60,
                  zIndex: -100,
                }}
              />
            </ImageBackground>
            <View style={{justifyContent: 'center', alignItems: 'center'}}>
              <Text style={{marginTop: 20}}>{userDetails.position}</Text>
              <Text style={{color: 'black', fontSize: 18, fontWeight: 'bold'}}>
                {`${userDetails.first_name} ${
                  userDetails.middle_name ? userDetails.middle_name : ''
                } ${userDetails.last_name} `}
              </Text>
              <View style={{flexDirection: 'row', marginTop: 10}}>
                <View
                  style={{flex: 1, alignItems: 'flex-end', paddingRight: 5}}>
                  <Image
                    source={IMAGES.IconMailGrey}
                    style={{height: 25, width: 25}}
                  />
                </View>
                <Text style={{flex: 2, color: 'black'}}>
                  {userDetails.email}
                </Text>
              </View>
              <View style={{flexDirection: 'row', marginTop: 10}}>
                <View
                  style={{flex: 1, alignItems: 'flex-end', paddingRight: 5}}>
                  <Image
                    source={IMAGES.IcPhoneGrey}
                    style={{height: 25, width: 25}}
                  />
                </View>
                <Text style={{flex: 2, color: 'black'}}>
                  {userDetails.cell_phone}
                </Text>
              </View>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-evenly',
                marginTop: 20,
              }}>
              <Text style={{color: 'black', fontWeight: 'bold'}}>
                #willing-to-do
              </Text>
              <Text style={{color: 'black', fontWeight: 'bold'}}>#passion</Text>
              <Text style={{color: 'black', fontWeight: 'bold'}}>
                #hard-working
              </Text>
            </View>
          </ImageBackground>
        </Swiper>

        {/* General information  */}
        <View style={styles.viewInfo}>
          <View style={styles.viewTitle}>
            <Text style={{color: 'black', fontSize: 18}}>
              {strings.GENERAL_INFORMATION}
            </Text>
          </View>
          <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
            <View style={{flexDirection: 'row'}}>
              <Image source={IMAGES.IcUser} style={{height: 45, width: 45}} />
              <View style={{marginLeft: 5}}>
                <Text>{strings.USER_ID}</Text>
                <Text style={{color: 'black', fontSize: 15}}>
                  {userDetails.employee_code}
                </Text>
              </View>
            </View>
            <View style={{flexDirection: 'row'}}>
              <Image source={IMAGES.IcCheck} style={{height: 45, width: 45}} />
              <View style={{marginLeft: 5}}>
                <Text>{strings.TIME_ATTENDANCE_CODE}</Text>
                <Text style={{color: 'black', fontSize: 15}}>
                  {userDetails.employee_code}
                </Text>
              </View>
            </View>
          </View>
          <View style={{flexDirection: 'row', marginTop: 10}}>
            <Image source={IMAGES.IcCalendar} style={{height: 45, width: 45}} />
            <View style={{marginLeft: 5}}>
              <Text>{strings.SHIFT}</Text>
              <Text style={{color: 'black', fontSize: 15}}>
                Meu Official working time
              </Text>
            </View>
          </View>
          <View style={{flexDirection: 'row', marginTop: 10}}>
            <Image source={IMAGES.IcUserTag} style={{height: 45, width: 45}} />
            <View style={{marginLeft: 5}}>
              <Text>{strings.STATUS}</Text>
              <Text style={{color: 'black', fontSize: 15}}>
                Nhân viên chính thức
              </Text>
            </View>
          </View>
        </View>
        {/* personal information  */}
        <View style={[styles.viewInfo, styles.paddingView]}>
          <View style={styles.viewTitle}>
            <Text style={{color: 'black', fontSize: 17}}>
              {strings.PERSONAL_INFORMATION}
            </Text>
            <View
              style={{
                justifyContent: 'flex-end',
                alignItems: 'flex-end',
                flex: 1,
              }}>
              {!btnAvailable.personalBtn && (
                <TouchableOpacity
                  onPress={() => {
                    setEditField(prev => ({...prev, personal_info: true}));
                    setBtnAvailable(prev => ({...prev, personalBtn: true}));
                  }}>
                  <Image
                    source={IMAGES.IcEdit}
                    style={{height: 30, width: 30}}
                  />
                </TouchableOpacity>
              )}
              {btnAvailable.personalBtn && (
                <View style={{flexDirection: 'row'}}>
                  <TouchableOpacity
                    onPress={() => {
                      setEditField(prev => ({...prev, personal_info: false}));
                      setBtnAvailable(prev => ({...prev, personalBtn: false}));
                    }}
                    style={styles.btnCancel}>
                    <Text style={styles.blueTxt}>Hủy</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={styles.btnSubmit}
                    onPress={() => {
                      onSaveInfo();
                      setEditField(prev => ({...prev, personal_info: false}));
                      setBtnAvailable(prev => ({...prev, personalBtn: false}));
                    }}>
                    <Text style={styles.whiteTxt}>Lưu</Text>
                  </TouchableOpacity>
                </View>
              )}
            </View>
          </View>
          {!isEditField.personal_info && (
            <View>
              <View style={styles.viewItem}>
                <View style={{flexDirection: 'row', flex: 1}}>
                  <Image source={IMAGES.IcInfoGuess} />
                  <View style={{marginLeft: 5}}>
                    <Text>{strings.LAST_NAME}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.first_name}
                    </Text>
                  </View>
                </View>
                <View style={{flexDirection: 'row', flex: 1}}>
                  <Image source={IMAGES.IcInfoGuess} />
                  <View style={{marginLeft: 5}}>
                    <Text>{strings.MIDDLE_NAME}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.middle_name ? userDetails.middle_name : ''}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={styles.viewItem}>
                <View style={{flexDirection: 'row', flex: 1}}>
                  <Image source={IMAGES.IcInfoGuess} />
                  <View style={{marginLeft: 5}}>
                    <Text>{strings.FIRST_NAME}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.last_name}
                    </Text>
                  </View>
                </View>
                <View style={{flexDirection: 'row', flex: 1}}>
                  <Image source={IMAGES.IcInfoGuess} />
                  <View style={{marginLeft: 5}}>
                    <Text>{strings.GENDER}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.gender ? 'Nam' : 'Nữ'}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={styles.viewItem}>
                <Image
                  source={IMAGES.IcPhone}
                  style={{height: 20, width: 20}}
                />
                <View style={{marginLeft: 5}}>
                  <Text>{strings.TELEPHONE}</Text>
                  <Text style={{color: 'black', fontSize: 15}}>
                    {userDetails.cell_phone}
                  </Text>
                </View>
              </View>
              <View style={styles.viewItem}>
                <Image
                  source={IMAGES.IcMailGray}
                  style={{height: 20, width: 20}}
                />
                <View style={{marginLeft: 5}}>
                  <Text>{strings.EMAIL}</Text>
                  <Text style={{color: 'black', fontSize: 15}}>
                    {userDetails.email}
                  </Text>
                </View>
              </View>
            </View>
          )}
          {isEditField.personal_info && (
            <View>
              {/* row 1 */}
              <View style={{flexDirection: 'row'}}>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <Text style={{fontSize: 12}}>Họ</Text>
                  <TextInputComponent
                    styleAreaInput={{backgroundColor: 'white'}}
                    placeholder={'Họ'}
                    keyboardType={'email-address'}
                    autoCapitalize="none"
                    value={infoUser.first_name}
                    onChangeText={text =>
                      setInfoUser(prev => ({
                        ...prev,
                        first_name: text,
                      }))
                    }
                  />
                </View>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <Text style={{fontSize: 12}}>Tên lót</Text>
                  <TextInputComponent
                    styleAreaInput={{backgroundColor: 'white'}}
                    placeholder={'Tên lót'}
                    keyboardType={'email-address'}
                    autoCapitalize="none"
                    value={infoUser.middle_name}
                    onChangeText={text =>
                      setInfoUser(prev => ({
                        ...prev,
                        middle_name: text,
                      }))
                    }
                  />
                </View>
              </View>
              {/* row 2 */}
              <View style={{flexDirection: 'row'}}>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <Text style={{fontSize: 12}}>Tên</Text>
                  <TextInputComponent
                    styleAreaInput={{backgroundColor: 'white'}}
                    placeholder={'Tên'}
                    keyboardType={'email-address'}
                    autoCapitalize="none"
                    value={infoUser.last_name}
                    onChangeText={text =>
                      setInfoUser(prev => ({
                        ...prev,
                        last_name: text,
                      }))
                    }
                  />
                </View>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <Text style={{fontSize: 12}}>Giới tính</Text>
                  <SelectDropdown
                    data={gender}
                    dropdownIconPosition={'right'}
                    defaultButtonText={
                      infoUser.gender ? 'Nam' : 'Nữ' || 'Chọn giới tính'
                    }
                    buttonStyle={styles.dropdown1BtnStyle}
                    onSelect={(selectedItem, item_index) =>
                      setInfoUser(prev => ({
                        ...prev,
                        gender: selectedItem === 'Nam' ? true : false,
                      }))
                    }
                    dropdownStyle={styles.dropdown1DropdownStyle}
                    rowStyle={styles.dropdown1RowStyle}
                    rowTextStyle={styles.dropdown1RowTxtStyle}
                    buttonTextStyle={styles.dropdown1BtnTxtStyle}
                    renderDropdownIcon={isOpened => {
                      return (
                        <Image
                          source={
                            isOpened ? IMAGES.IcUpArrow : IMAGES.IcDownArrow
                          }
                          style={{width: 20, height: 20}}
                        />
                      );
                    }}
                  />
                </View>
              </View>
              {/* row 3 */}
              <View style={{paddingLeft: 10, paddingRight: 10}}>
                <Text style={{fontSize: 12}}>Số điện thoại</Text>
                <TextInputComponent
                  styleAreaInput={{backgroundColor: 'white'}}
                  placeholder={'Số điện thoại'}
                  keyboardType={'phone-pad'}
                  autoCapitalize="none"
                  value={infoUser.cell_phone}
                  onChangeText={text =>
                    setInfoUser(prev => ({
                      ...prev,
                      cell_phone: text,
                    }))
                  }
                />
              </View>
              {/* row 4 */}
              <View style={{paddingLeft: 10, paddingRight: 10}}>
                <Text style={{fontSize: 12}}>Email</Text>
                <TextInputComponent
                  disable={true}
                  styleAreaInput={{backgroundColor: 'white'}}
                  placeholder={'Email'}
                  keyboardType={'email-address'}
                  autoCapitalize="none"
                  value={infoUser.email}
                  onChangeText={text =>
                    setInfoUser(prev => ({
                      ...prev,
                      email: text,
                    }))
                  }
                />
              </View>
            </View>
          )}
        </View>
        {/* detail information  */}
        <View style={[styles.viewInfo, styles.paddingView]}>
          <View style={styles.viewTitle}>
            <Text style={{color: 'black', fontSize: 18, flex: 1}}>
              {strings.DETAIL_INFORMATION}
            </Text>
            <View
              style={{
                justifyContent: 'flex-end',
                alignItems: 'flex-end',
                flex: 1,
              }}>
              {!btnAvailable.detailBtn && (
                <TouchableOpacity
                  onPress={() => {
                    setEditField(prev => ({...prev, detail_info: true}));
                    setBtnAvailable(prev => ({...prev, detailBtn: true}));
                  }}>
                  <Image
                    source={IMAGES.IcEdit}
                    style={{height: 30, width: 30}}
                  />
                </TouchableOpacity>
              )}
              {btnAvailable.detailBtn && (
                <View style={{flexDirection: 'row'}}>
                  <TouchableOpacity
                    onPress={() => {
                      setEditField(prev => ({...prev, detail_info: false}));
                      setBtnAvailable(prev => ({...prev, detailBtn: false}));
                    }}
                    style={styles.btnCancel}>
                    <Text style={styles.blueTxt}>Hủy</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={styles.btnSubmit}
                    onPress={() => {
                      onSaveInfo();
                      setEditField(prev => ({...prev, detail_info: false}));
                      setBtnAvailable(prev => ({...prev, detailBtn: false}));
                    }}>
                    <Text style={styles.whiteTxt}>Lưu</Text>
                  </TouchableOpacity>
                </View>
              )}
            </View>
          </View>
          {!isEditField.detail_info && (
            <View>
              {/* row 1 */}
              <View style={styles.viewItem}>
                <View style={{flexDirection: 'row', flex: 1}}>
                  <Image source={IMAGES.IcInfoGuess} />
                  <View style={{marginLeft: 5}}>
                    <Text>{strings.IDENTITY_CARD}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.id_card_number}
                    </Text>
                  </View>
                </View>
                <View style={styles.rightView}>
                  <Image
                    source={IMAGES.IcCalendarGray}
                    style={{height: 25, width: 25}}
                  />
                  <View>
                    <Text>{strings.DATE_IDENTITY_CARD}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.id_card_issue_date &&
                        Moment(userDetails.id_card_issue_date).format(
                          'DD/MM/YYYY',
                        )}
                    </Text>
                  </View>
                </View>
              </View>
              {/* row 2 */}
              <View style={styles.viewItem}>
                <View style={{flexDirection: 'row', flex: 1}}>
                  <Image source={IMAGES.IcInfoGuess} />
                  <View style={{marginLeft: 5}}>
                    <Text>{strings.ISSUED_BY}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.id_card_issue_palce}
                    </Text>
                  </View>
                </View>
                <View style={styles.rightView}>
                  <Image
                    source={IMAGES.IcCalendarGray}
                    style={{height: 25, width: 25}}
                  />
                  <View>
                    <Text>{strings.DATE_OF_BIRTH}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {infoUser.birthday &&
                        Moment(infoUser.birthday).format('DD/MM/YYYY')}
                    </Text>
                  </View>
                </View>
              </View>
              {/* row 3 */}
              <View style={styles.viewItem}>
                <View style={{flexDirection: 'row', flex: 1}}>
                  <Image source={IMAGES.IcInfoGuess} />
                  <View style={{marginLeft: 5}}>
                    <Text>{strings.PLACE_OF_COUNTRY}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.domicile}
                    </Text>
                  </View>
                </View>
                <View style={styles.rightView}>
                  <Image
                    source={IMAGES.IcCalendarGray}
                    style={{height: 25, width: 25}}
                  />
                  <View>
                    <Text>Nơi sinh</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.birthplace}
                    </Text>
                  </View>
                </View>
              </View>
              {/* row 4 */}
              <View style={styles.viewItem}>
                <View style={{flexDirection: 'row', flex: 1}}>
                  <Image source={IMAGES.IcInfoGuess} />
                  <View style={{marginLeft: 5}}>
                    <Text>{strings.NATIONALITY}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.nationality}
                    </Text>
                  </View>
                </View>
                <View style={styles.rightView}>
                  <Image
                    source={IMAGES.IcCalendarGray}
                    style={{height: 25, width: 25}}
                  />
                  <View>
                    <Text>{string.ETHNIC}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.ethnic}
                    </Text>
                  </View>
                </View>
              </View>
              {/* row 5 */}
              <View style={styles.viewItem}>
                <View style={{flexDirection: 'row', flex: 1}}>
                  <Image source={IMAGES.IcInfoGuess} />
                  <View style={{marginLeft: 5}}>
                    <Text>{strings.RELIGION}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.religion}
                    </Text>
                  </View>
                </View>
                <View style={styles.rightView}>
                  <Image
                    source={IMAGES.IcCalendarGray}
                    style={{height: 25, width: 25}}
                  />
                  <View>
                    <Text>{strings.MST}</Text>
                    <Text style={{color: 'black', fontSize: 15}}>
                      {userDetails.personal_tax_code}
                    </Text>
                  </View>
                </View>
              </View>
              {/* row 6 */}
              <View style={styles.viewItem}>
                <Image
                  source={IMAGES.IcLocationGray}
                  style={{height: 25, width: 25}}
                />
                <View style={{marginLeft: 5}}>
                  <Text>{strings.PERMANENT_ADDRESS}</Text>
                  <Text style={{color: 'black', fontSize: 15}}>
                    {userDetails.permanent_address}
                  </Text>
                </View>
              </View>
              {/* row 7 */}
              <View style={styles.viewItem}>
                <Image
                  source={IMAGES.IcLocationGray}
                  style={{height: 25, width: 25}}
                />
                <View style={{marginLeft: 5}}>
                  <Text>{strings.RESIDENTIAL_ADDRESS}</Text>
                  <Text style={{color: 'black', fontSize: 15}}>
                    {userDetails.address}
                  </Text>
                </View>
              </View>
            </View>
          )}
          {isEditField.detail_info && (
            <View>
              {/* row 1 */}
              <View style={{flexDirection: 'row'}}>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <Text style={{fontSize: 12}}>Số CMND</Text>
                  <TextInputComponent
                    maxLength={12}
                    styleAreaInput={{backgroundColor: 'white'}}
                    placeholder={'Số CMND'}
                    keyboardType={'phone-pad'}
                    autoCapitalize="none"
                    value={infoUser.id_card_number}
                    onChangeText={text =>
                      setInfoUser(prev => ({
                        ...prev,
                        id_card_number: text,
                      }))
                    }
                  />
                </View>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <TouchableOpacity
                    onPress={() =>
                      setDateTimePicker(prev => ({
                        ...prev,
                        id_card_issue_date: true,
                      }))
                    }>
                    <Text style={{fontSize: 12}}>Ngày cấp CMND</Text>
                    <TextInputComponent
                      disable={true}
                      styleAreaInput={{backgroundColor: 'white'}}
                      placeholder={'Ngày cấp CMND'}
                      keyboardType={'email-address'}
                      autoCapitalize="none"
                      value={
                        infoUser.id_card_issue_date &&
                        Moment(infoUser.id_card_issue_date).format('DD/MM/YYYY')
                      }
                      onChangeText={text =>
                        setInfoUser(prev => ({
                          ...prev,
                          id_card_issue_date: text,
                        }))
                      }
                    />
                    <DateTimePickerModal
                      isVisible={dateTimePicker.id_card_issue_date}
                      mode="date"
                      date={new Date(infoUser.id_card_issue_date)}
                      onConfirm={time => {
                        setInfoUser(prev => ({
                          ...prev,
                          id_card_issue_date: time,
                        }));
                        hideDateTimePicker();
                      }}
                      onCancel={() => hideDateTimePicker()}
                    />
                  </TouchableOpacity>
                </View>
              </View>
              {/* row 2 */}
              <View style={{flexDirection: 'row'}}>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <Text style={{fontSize: 12}}>Nơi cấp CMND</Text>
                  <TextInputComponent
                    styleAreaInput={{backgroundColor: 'white'}}
                    placeholder={'Nơi cấp CMND'}
                    keyboardType={'email-address'}
                    autoCapitalize="none"
                    value={infoUser.id_card_issue_palce}
                    onChangeText={text =>
                      setInfoUser(prev => ({
                        ...prev,
                        id_card_issue_palce: text,
                      }))
                    }
                  />
                </View>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <TouchableOpacity
                    onPress={() =>
                      setDateTimePicker(prev => ({
                        ...prev,
                        birthday: true,
                      }))
                    }>
                    <Text style={{fontSize: 12}}>Ngày sinh</Text>
                    <TextInputComponent
                      disable={true}
                      styleAreaInput={{backgroundColor: 'white'}}
                      placeholder={'Ngày sinh'}
                      keyboardType={'email-address'}
                      autoCapitalize="none"
                      value={
                        infoUser.birthday &&
                        Moment(infoUser.birthday).format('DD/MM/YYYY')
                      }
                    />
                    <DateTimePickerModal
                      isVisible={dateTimePicker.birthday}
                      mode="date"
                      date={new Date(infoUser.birthday)}
                      onConfirm={time => {
                        setInfoUser(prev => ({
                          ...prev,
                          birthday: time,
                        }));
                        hideDateTimePicker();
                      }}
                      onCancel={() => hideDateTimePicker()}
                    />
                  </TouchableOpacity>
                </View>
              </View>
              {/* row 3 */}
              <View style={{flexDirection: 'row'}}>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <Text style={{fontSize: 12}}>Nguyên Quán</Text>
                  <TextInputComponent
                    styleAreaInput={{backgroundColor: 'white'}}
                    placeholder={'Nguyên Quán'}
                    keyboardType={'email-address'}
                    autoCapitalize="none"
                    value={infoUser.domicile}
                    onChangeText={text =>
                      setInfoUser(prev => ({
                        ...prev,
                        domicile: text,
                      }))
                    }
                  />
                </View>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <Text style={{fontSize: 12}}>Nơi sinh</Text>
                  <TextInputComponent
                    styleAreaInput={{backgroundColor: 'white'}}
                    placeholder={'Nơi sinh'}
                    keyboardType={'email-address'}
                    autoCapitalize="none"
                    value={infoUser.birthplace}
                    onChangeText={text =>
                      setInfoUser(prev => ({
                        ...prev,
                        birthplace: text,
                      }))
                    }
                  />
                </View>
              </View>
              {/* row 4 */}
              <View style={{flexDirection: 'row'}}>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <Text style={{fontSize: 12}}>Quốc tịch</Text>
                  <TextInputComponent
                    styleAreaInput={{backgroundColor: 'white'}}
                    placeholder={'Quốc tịch'}
                    keyboardType={'email-address'}
                    autoCapitalize="none"
                    value={infoUser.nationality}
                    onChangeText={text =>
                      setInfoUser(prev => ({
                        ...prev,
                        nationality: text,
                      }))
                    }
                  />
                </View>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <Text style={{fontSize: 12}}>Dân tộc</Text>
                  <TextInputComponent
                    styleAreaInput={{backgroundColor: 'white'}}
                    placeholder={'Dân tộc'}
                    keyboardType={'email-address'}
                    autoCapitalize="none"
                    value={infoUser.ethnic}
                    onChangeText={text =>
                      setInfoUser(prev => ({
                        ...prev,
                        ethnic: text,
                      }))
                    }
                  />
                </View>
              </View>
              {/* row 5 */}
              <View style={{flexDirection: 'row'}}>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <Text style={{fontSize: 12}}>Tôn giáo</Text>
                  <TextInputComponent
                    styleAreaInput={{backgroundColor: 'white'}}
                    placeholder={'Tôn giáo'}
                    keyboardType={'email-address'}
                    autoCapitalize="none"
                    value={infoUser.religion}
                    onChangeText={text =>
                      setInfoUser(prev => ({
                        ...prev,
                        religion: text,
                      }))
                    }
                  />
                </View>
                <View style={{flex: 1, paddingLeft: 10, paddingRight: 10}}>
                  <Text style={{fontSize: 12}}>Mã số thuế</Text>
                  <TextInputComponent
                    maxLength={20}
                    styleAreaInput={{backgroundColor: 'white'}}
                    placeholder={'Mã số thuế'}
                    keyboardType={'email-address'}
                    autoCapitalize="none"
                    value={infoUser.personal_tax_code}
                    onChangeText={text =>
                      setInfoUser(prev => ({
                        ...prev,
                        personal_tax_code: text,
                      }))
                    }
                  />
                </View>
              </View>
              {/* row 6 */}
              <View style={{paddingLeft: 10, paddingRight: 10}}>
                <Text style={{fontSize: 12}}>Địa chỉ thường trú</Text>
                <TextInputComponent
                  styleAreaInput={{backgroundColor: 'white'}}
                  placeholder={'Địa chỉ thường trú'}
                  keyboardType={'email-address'}
                  autoCapitalize="none"
                  value={infoUser.permanent_address}
                  onChangeText={text =>
                    setInfoUser(prev => ({
                      ...prev,
                      permanent_address: text,
                    }))
                  }
                />
              </View>
              {/* row 7 */}
              <View style={{paddingLeft: 10, paddingRight: 10}}>
                <Text style={{fontSize: 12}}>Địa chỉ liên hệ</Text>
                <TextInputComponent
                  styleAreaInput={{backgroundColor: 'white'}}
                  placeholder={'Địa chỉ liên hệ'}
                  keyboardType={'email-address'}
                  autoCapitalize="none"
                  value={infoUser.address}
                  onChangeText={text =>
                    setInfoUser(prev => ({
                      ...prev,
                      address: text,
                    }))
                  }
                />
              </View>
            </View>
          )}
        </View>
        {/* contact information  */}
        <View style={[styles.viewInfo, styles.marginBottom]}>
          {/* edit */}
          <View style={styles.viewTitle}>
            <Text style={{color: 'black', fontSize: 18, flex: 1}}>
              Thông tin liên lạc
            </Text>
            <View
              style={{
                justifyContent: 'flex-end',
                alignItems: 'flex-end',
                flex: 1,
              }}>
              {!btnAvailable.contactBtn && (
                <TouchableOpacity
                  onPress={() => {
                    setEditField(prev => ({...prev, contact_info: true}));
                    setBtnAvailable(prev => ({...prev, contactBtn: true}));
                  }}>
                  <Image
                    source={IMAGES.IcEdit}
                    style={{height: 30, width: 30}}
                  />
                </TouchableOpacity>
              )}
              {btnAvailable.contactBtn && (
                <View style={{flexDirection: 'row'}}>
                  <TouchableOpacity
                    onPress={() => {
                      setEditField(prev => ({...prev, contact_info: false}));
                      setBtnAvailable(prev => ({...prev, contactBtn: false}));
                    }}
                    style={styles.btnCancel}>
                    <Text style={styles.blueTxt}>Hủy</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={styles.btnSubmit}
                    onPress={() => onSubmitChangeContactUser()}>
                    <Text style={styles.whiteTxt}>Lưu</Text>
                  </TouchableOpacity>
                </View>
              )}
            </View>
          </View>
          {!isEditField.contact_info &&
            contactUser.map((item, index) => {
              return (
                <View key={index} style={{flexDirection: 'row'}}>
                  <View style={{flexDirection: 'row'}}>
                    <Image
                      source={IconSocial[item.type]}
                      style={{height: 25, width: 25}}
                    />
                    <View style={{marginLeft: 5, justifyContent: 'center'}}>
                      <Text style={{color: 'black', fontSize: 15}}>
                        {item.contact_unique_id}
                      </Text>
                    </View>
                  </View>
                </View>
              );
            })}
          {isEditField.contact_info &&
            // <SwipeListView
            //     data={contactUser}
            //     renderItem={renderContactUser}
            //     renderHiddenItem={renderHiddenItem}
            //     rightOpenValue={-75}
            //     scrollEnabled={false}
            // // onRefresh={onRefreshList}
            // // onEndReached={onLoadMore}
            // // onRowDidOpen={(item, index) => onDeleteNotification(item, index)}
            // />
            contactUser.map((item, index) => {
              return (
                <GestureHandlerRootView key={index}>
                  <Swipeable
                    renderRightActions={dragX =>
                      renderRightActions(dragX, item)
                    }>
                    <View
                      style={{
                        flexDirection: 'row',
                        flex: 1,
                        justifyContent: 'center',
                      }}>
                      <View style={{flex: 3}}>
                        <SelectDropdown
                          data={Socials}
                          dropdownIconPosition={'right'}
                          defaultButtonText={item.type}
                          buttonStyle={styles.dropdown1BtnStyle}
                          onSelect={(selectedItem, item_index) =>
                            onChangeDropDownContactUser(selectedItem, index)
                          }
                          dropdownStyle={styles.dropdown1DropdownStyle}
                          rowStyle={styles.dropdown1RowStyle}
                          rowTextStyle={styles.dropdown1RowTxtStyle}
                          buttonTextStyle={styles.dropdown1BtnTxtStyle}
                          renderDropdownIcon={isOpened => {
                            return (
                              <Image
                                source={
                                  isOpened
                                    ? IMAGES.IcUpArrow
                                    : IMAGES.IcDownArrow
                                }
                                style={{width: 20, height: 20}}
                              />
                            );
                          }}
                        />
                      </View>
                      <View style={{flex: 5}}>
                        <TextInputComponent
                          styleAreaInput={{backgroundColor: 'white'}}
                          placeholder={`${item.type} contact`}
                          keyboardType={'email-address'}
                          autoCapitalize="none"
                          value={item.contact_unique_id}
                          onChangeText={text =>
                            onChangeInputContactUser(text, index)
                          }
                        />
                      </View>
                    </View>
                  </Swipeable>
                </GestureHandlerRootView>
              );
            })}
          {isEditField.contact_info && (
            <View style={{justifyContent: 'flex-end', alignItems: 'flex-end'}}>
              <ButtonComponent
                style={{marginTop: -15}}
                styleIcon={{width: 20, height: 20}}
                iconSource={IMAGES.IcAdd}
                onPress={onPressAddItem}
              />
            </View>
          )}
        </View>

        {/* Logout Btn */}
        <View
          style={{
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 10,
          }}>
          <ButtonComponent
            text={'Đăng xuất'}
            style={{marginBottom: 10, flexDirection: 'row'}}
            rightIcon={IMAGES.IcLogout}
            styleIcon={{width: 20, height: 20, marginLeft: 10}}
            onPress={navigateToLogout}
          />
        </View>
        <Alert
          show={showAlert.isError}
          showProgress={false}
          title={showAlert.title}
          message={showAlert.message}
          closeOnTouchOutside={true}
          closeOnHardwareBackPress={false}
          showConfirmButton={true}
          showCancelButton={true}
          confirmText="Xóa"
          cancelText="Không"
          confirmButtonColor="#DD6B55"
          onConfirmPressed={onConfirmDeleteAlert}
          onCancelPressed={onCancelAlert}
        />
        <View style={styles.centeredView}>
          <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
              Alert.alert('Modal has been closed.');
              setModalVisible(!modalVisible);
            }}>
            <View style={styles.centeredView}>
              <View style={styles.modalView}>
                <View style={{flexDirection: 'row'}}>
                  <View style={{flex: 1}}>
                    <SelectDropdown
                      data={Socials}
                      dropdownIconPosition={'right'}
                      defaultButtonText={'Loại liên hệ'}
                      buttonStyle={styles.dropdown1BtnStyle}
                      onSelect={(selectedItem, item_index) =>
                        setUserInputContact(prev => ({
                          ...prev,
                          type: selectedItem,
                        }))
                      }
                      dropdownStyle={styles.dropdown1DropdownStyle}
                      rowStyle={styles.dropdown1RowStyle}
                      rowTextStyle={styles.dropdown1RowTxtStyle}
                      buttonTextStyle={styles.dropdown1BtnTxtStyle}
                      renderDropdownIcon={isOpened => {
                        return (
                          <Image
                            source={
                              isOpened ? IMAGES.IcUpArrow : IMAGES.IcDownArrow
                            }
                            style={{width: 20, height: 20}}
                          />
                        );
                      }}
                    />
                    {userInputContact.type.length <= 0 && (
                      <Text style={{fontSize: 12, color: 'red'}}>
                        {' '}
                        Vui lòng chọn liên hệ
                      </Text>
                    )}
                  </View>
                  <View style={{flex: 1}}>
                    <TextInput
                      style={{borderBottomWidth: 0.2}}
                      placeholder={'Nhập F'}
                      keyboardType={'email-address'}
                      autoCapitalize="none"
                      value={userInputContact.text}
                      onChangeText={text =>
                        setUserInputContact(prev => ({
                          ...prev,
                          text: text,
                        }))
                      }
                    />
                    {userInputContact.text.length <= 0 && (
                      <Text style={{fontSize: 12, color: 'red'}}>
                        {' '}
                        Vui lòng nhập liên hệ
                      </Text>
                    )}
                  </View>
                </View>
                <View style={{flexDirection: 'row', marginTop: 20}}>
                  <ButtonComponent
                    text={'Đóng'}
                    textStyle={styles.textStyle}
                    style={[
                      styles.button,
                      styles.buttonClose,
                      {marginRight: 15},
                    ]}
                    onPress={() => setModalVisible(!modalVisible)}
                  />
                  <ButtonComponent
                    text={'Thêm mới'}
                    textStyle={styles.textStyle}
                    style={[styles.button, styles.buttonClose]}
                    onPress={onSubmitCreateNew}
                  />
                </View>
              </View>
            </View>
          </Modal>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default ProfileScreen;
