import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  TextInput,
  ScrollView,
  Alert,
  FlatList,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {initialMode} from 'react-native-dark-mode';
import ImagePicker from 'react-native-image-crop-picker';
import BackHeader from '../../components/backHeader';
import Picker from 'react-native-picker-js';
import Modal, {ModalContent} from 'react-native-modals';
import {colors} from '../../assets/styles/colors-theme';
import history from '../../common/history';
import NaviBar from '../../components/navi-bar';
import Migrations from '../../services/realm/Mirgrations';
import {Avatar} from 'react-native-elements';
import moment from 'moment';
import {inject, observer} from 'mobx-react';
import RNPickerSelect from 'react-native-picker-select';
import {Fonts} from '../../assets/styles/fonts-theme';
import DeviceInfo from 'react-native-device-info';
import {observable} from 'mobx';
import CountryPicker, {
  getAllCountries,
} from 'react-native-country-picker-modal';
import RadioForm, {
  RadioButton,
  RadioButtonInput,
  RadioButtonLabel,
} from 'react-native-simple-radio-button';
import DateTimePicker from 'react-native-modal-datetime-picker';
import IconTextInput from '../../components/iconTextInput';
import CommonTextInput from '../../components/commonTextInput';
import {queryUser} from '../../services/realm/realmManger';
import {width, height} from '../../common/screen';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import Size from '../../common/size';
import Menu, {
  MenuProvider,
  MenuTrigger,
  MenuOptions,
  MenuOption,
  renderers,
} from 'react-native-popup-menu';
const {SlideInMenu} = renderers;
const size = new Size();
const whichChar = ['業主 Landlord', '租客 Tenant'];
// const formatter = new Intl.NumberFormat('en-US', {
//   style: 'currency',
//   currency: 'HKD',
//   minimumFractionDigits: 0,
// });

@inject('appStore')
@observer
export default class ContractData extends Component {
  @observable
  addAppliancesVisable = false;
  @observable
  newAppliances = {
    chineseName: '',
    englishName: '',
    value: 0,
  };
  @observable
  newKey = {
    chineseName: '',
    englishName: '',
    value: 0,
  };
  @observable
  number1_12 = [];
  @observable
  number1_36 = [];
  @observable
  number1_90 = [0];

  @observable
  number1_28 = [];

  @observable
  dialogInputVisable = false;
  @observable
  DatePickervisable = false;
  @observable
  addKeyVisable = false;
  @observable
  wheelSelectData = [];
  @observable
  wheelSelected = null;
  @observable
  whichDatePicker = 0;
  @observable
  whichInput = 0;
  @observable
  apartmentData = {};
  @observable
  contractData = {
    apartmentid: '',
    leaseMonth: 12,
    payRentDate: 28,
    numberOfkey: 1,
    rentFreePeriod: 0,
    noteLeasebackMonth: 1,
    monthOfpaymentInLieuOfNotice: 1,
    atleastRentOfmonth: 1,
    whoPayManagementFee: 'owner',
    whoPayGovernemtRate: 'owner',
    whoPayGovernmentRent: 'owner',
    services: [],
    key: [
      {
        chineseName: '門匙',
        englishName: 'Key',
        value: 0,
      },
      {
        chineseName: '鐵閘匙',
        englishName: 'Iron gate key',
        value: 0,
      },
      {
        chineseName: '房門匙',
        englishName: 'Door key',
        value: 0,
      },
      {
        chineseName: '信箱匙',
        englishName: 'Mailbox key',
        value: 0,
      },
      {
        chineseName: '垃圾房匙',
        englishName: 'Garbage room key',
        value: 0,
      },
    ],
    appliances: [
      {
        chineseName: '抽油煙機',
        englishName: 'Range Hood',
        value: 0,
      },
      {
        chineseName: ' 煮食爐',
        englishName: 'Cooking Stove',
        value: 0,
      },
      {
        chineseName: '微波爐',
        englishName: 'Microwave',
        value: 0,
      },
      {
        chineseName: '窗口式冷氣機',
        englishName: 'Window Type Air Conditione',
        value: 0,
      },
      {
        chineseName: '洗衣機',
        englishName: 'Washing Machine',
        value: 0,
      },
      {
        chineseName: '雪櫃',
        englishName: 'Refrigerator',
        value: 0,
      },
      {
        chineseName: '電視機',
        englishName: 'Television',
        value: 0,
      },
      {
        chineseName: '分體式冷氣機',
        englishName: 'Split Type Air-Conditioner',
        value: 0,
      },
      {
        chineseName: '抽氣扇',
        englishName: 'Exhaust fan',
        value: 0,
      },
      {
        chineseName: '熱水爐',
        englishName: 'boiler',
        value: 0,
      },
      {
        chineseName: '燈飾',
        englishName: 'Lighting',
        value: 0,
      },
      {
        chineseName: '窗簾',
        englishName: 'curtain',
        value: 0,
      },
      {
        chineseName: '組合櫃',
        englishName: 'Cabinet',
        value: 0,
      },
      {
        chineseName: '沙發',
        englishName: 'sofa',
        value: 0,
      },
      {
        chineseName: '衣櫃',
        englishName: 'wardrobe',
        value: 0,
      },
      {
        chineseName: '床',
        englishName: 'bed',
        value: 0,
      },
    ],
    ownerPaymentAc: '',
    ownerName: '',
    ownerId: '',
    ownerPhone: '',
    tenantName: '',
    tenantId: '',
    tenantContactAddress: '',
    tenantPhone: '',
    apartmentAddress: '',
    signContractDate: null,
    endContractDate: null,
    rent: 0,
    rates: 0,
    managementFee: 0,
    deposit: 0,
    remark: [],
  };

  inputAction(action) {
    switch (action) {
      case 0:
        this.dialogInputVisable = true;
        break;

      case 1:
        this.DatePickervisable = true;
        break;
    }
  }

  constructor(props) {
    super(props);
    this.store = props.appStore;
    this.apartmentData = this.props.navigation.state.params.apartmentData;
    console.log(this.apartmentData);
    this.init();
  }

  isDarkMode() {
    if (initialMode === 'dark') {
      this.drakMode = true;
    } else {
      this.drakMode = false;
    }
  }
  currencyFormat(num) {
    return '$' + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
  }

  init() {
    this.contractData.signContractDate = moment().toDate();
    //this.number1_90.push(0);
    for (var i = 0; i <= 90; i++) {
      this.number1_90.push(i);
      if (i > 0 && i <= 12) {
        this.number1_12.push(i);
        this.number1_28.push(i);
        this.number1_36.push(i);
      } else if (i > 0 && i <= 28) {
        this.number1_28.push(i);
        this.number1_36.push(i);
      } else if (i > 0 && i <= 36) {
        this.number1_36.push(i);
      } else if (i > 0 && i <= 36) {
      }
    }
    this.contractData.ownerPhone = this.apartmentData.owner.phone;
    this.contractData.tenantPhone = this.apartmentData.tenant.phone;
    this.contractData.rent = this.apartmentData.rent;
    this.contractData.deposit = this.apartmentData.deposit;
    this.contractData.leaseMonth = this.apartmentData.leaseMonth;
    this.contractData.apartment = this.apartmentData.id;
    this.contractData.apartmentName = this.apartmentData.name;
    this.contractData.apartmentAddress = this.apartmentData.address;

    this.contractData.signContractDate = moment(
      this.apartmentData.signContractDate,
      'YYYY-MM-DD',
    ).toDate();
    this.contractData.endContractDate = moment(
      this.apartmentData.endContractDate,
      'YYYY-MM-DD',
    ).toDate();
    this.contractData.rent = this.apartmentData.rent;
    this.contractData.id = this.apartmentData.id;
    this.contractData.ownerSignUri = this.dataReturn('ownerSignUri');
    this.contractData.stamp = this.dataReturn('stamp');
    this.contractData.tenantSignUri = this.dataReturn('tenantSignUri');
    this.contractData.ownersigndate = this.dataReturn('ownersigndate');
    this.contractData.tenantsigndate = this.dataReturn('tenantsigndate');
    console.log(this.apartmentData.signContractDate);
  }
  renderBackIcon() {
    return (
      <TouchableOpacity
        style={{
          position: 'absolute',
          left: 20,
          justifyContent: 'center',
          alignItems: 'center',
          height: 40,
          width: 40,
        }}
        onPress={() => {
          console.log('back');
          history.goBack(this);
        }}>
        <Icon
          name={'arrow-left'}
          size={22}
          color={'white'}
          style={{
            ...Platform.select({
              ios: {},
              android: {
                //top: 40,
              },
            }),
          }}
        />
      </TouchableOpacity>
    );
  }

  dataReturn(select) {
    switch (select) {
      case 'ownerSignUri':
        if (this.apartmentData.owner.hasOwnProperty('sign')) {
          return this.apartmentData.owner.sign;
        } else {
          return '';
        }
        break;

      case 'stamp':
        if (this.apartmentData.owner.hasOwnProperty('stamp')) {
          return this.apartmentData.owner.stamp;
        } else {
          return '';
        }
        break;

      case 'tenantSignUri':
        if (this.apartmentData.tenant.hasOwnProperty('sign')) {
          return '';
        } else {
          return '';
        }
        break;

      case 'ownersigndate':
        if (this.apartmentData.tenant.hasOwnProperty('signdate')) {
          return this.apartmentData.owner.signdate;
        } else {
          return moment().format('DD-MM-YYYY');
        }
        break;

      case 'tenantsigndate':
        if (this.apartmentData.tenant.hasOwnProperty('signdate')) {
          return this.apartmentData.tenant.signdate;
        } else {
          return '';
        }
        break;
    }
  }

  componentWillMount() {
    this.isDarkMode();
  }

  componentDidMount() {}

  dateStringHandler(date) {
    if (date === null) {
      return '';
    } else {
      return (
        date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear()
      );
    }
  }

  removeRemark(index) {
    this.contractData.remark.splice(index, 1);
  }

  whichDate() {
    if (this.whichDatePicker === 0) {
      return this.apartmentData.signContractDate;
    } else {
      return this.apartmentData.endContractDate;
    }
  }

  handleDatePicked = date => {
    this.DatePickervisable = false;
    console.log('A date has been picked: ', date);
    // this.hideDateTimePicker();
    var momentDate = moment(date);
    momentDate = momentDate.second(0);
    momentDate = momentDate.minute(0);
    momentDate = momentDate.hour(12);
    this.contractData.signContractDate = momentDate.toDate();
  };

  contractDatePicker(title, which, dateData) {
    return (
      <View
        style={{
          flexDirection: 'row',
          width: width,
          paddingTop: 10,
          alignItems: 'center',
        }}>
        <Text style={{marginLeft: 10, marginRight: 10}}>{title}</Text>
        <Text style={{marginRight: 10}}>
          {this.dateStringHandler(dateData)}
        </Text>
        <Icon
          size={30}
          name={'calendar-alt'}
          onPress={() => {
            this.DatePickervisable = true;
            this.whichDatePicker = which;
          }}
        />
      </View>
    );
  }

  async editAction() {
    await this.store.saveEdit(this.props.navigation.state.params.index);
    await this.store.resetApartmentData();
    await this.store.getUser();
    history.goBack(this);
  }

  deleteAction() {
    Alert.alert(
      '',
      'Are you sure?',
      [
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {
          text: 'Yes',
          onPress: () => {
            this.deleteApartment();
          },
        },
      ],
      {cancelable: false},
    );
  }

  async deleteApartment() {
    await this.store.deleteApartment(this.props.navigation.state.params.index);
    await this.store.resetApartmentData();
    await this.store.getUser();
    history.goBack(this);
  }
  whichNotificationIndex() {
    if (this.whichNotificationPicker === 0) {
      return this.apartmentData.rentNotification;
    } else {
      return this.apartmentData.endContractNotification;
    }
  }
  notificationSelectAction(index) {
    if (this.whichNotificationPicker === 0) {
      console.log(index);
      this.apartmentData.rentNotification = index;
    } else {
      this.apartmentData.endContractNotification = index;
    }
  }

  alertAction(msg) {
    Alert.alert(
      'Error',
      msg,
      [{text: 'OK', onPress: () => console.log('ok')}],
      {cancelable: false},
    );
  }

  renderRemark() {
    return this.contractData.remark.map((items, index) => {
      return (
        <View style={[styles.inputTextView, {height: 35}]}>
          <View style={{flexDirection: 'row', marginBottom: 5}}>
            <View style={{flex: 0.8}}>
              <TextInput
                placeholder={'其它'}
                style={{
                  fontSize: 20,
                  color: 'black',
                  fontFamily: Fonts.ubuntuTh,
                }}
                value={this.contractData.remark[index]}
                onChangeText={text => {
                  this.contractData.remark[index] = text;
                }}
                underlineColorAndroid="rgba(0,0,0,0)"
              />
            </View>
            <TouchableOpacity
              style={{flex: 0.2, alignItems: 'flex-end'}}
              onPress={() => {
                this.contractData.remark.splice(index, 1);
              }}>
              <Icon
                name="times-circle"
                color={colors.line2Color}
                size={15}
                solid
                style={{marginRight: 10}}
              />
            </TouchableOpacity>
          </View>
        </View>
      );
    });
  }

  renderButton() {
    if (this.props.navigation.state.params.create) {
      return (
        <View style={{width: width, alignItems: 'center'}}>
          <TouchableOpacity
            onPress={() => {
              this.nextAction(true);
            }}
            style={{
              marginTop: 50,
              marginBottom: 20,
              backgroundColor: colors.mainColor,
              width: width - 60,
              height: 60,
              borderRadius: 10,
              shadowColor: '#000',
              justifyContent: 'center',
              alignItems: 'center',
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowOpacity: 0.23,
              shadowRadius: 2.62,

              elevation: 4,
            }}>
            <Text
              style={{color: 'white', fontFamily: Fonts.ubuntu, fontSize: 18}}>
              {this.store.text.next}
            </Text>
          </TouchableOpacity>
        </View>
      );
    } else {
      return (
        <View style={{width: width, alignItems: 'center'}}>
          <TouchableOpacity
            onPress={() => {
              this.nextAction(false);
            }}
            style={{
              marginTop: 50,
              marginBottom: 20,
              backgroundColor: colors.mainColor,
              width: width - 60,
              height: 60,
              borderRadius: 10,
              shadowColor: '#000',
              justifyContent: 'center',
              alignItems: 'center',
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowOpacity: 0.23,
              shadowRadius: 2.62,

              elevation: 4,
            }}>
            <Text
              style={{color: 'white', fontFamily: Fonts.ubuntu, fontSize: 18}}>
              Save
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              this.deleteAction();
            }}
            style={{
              marginTop: 10,
              marginBottom: 20,
              backgroundColor: colors.mainColor,
              width: width - 60,
              height: 60,
              borderRadius: 10,
              shadowColor: '#000',
              justifyContent: 'center',
              alignItems: 'center',
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowOpacity: 0.23,
              shadowRadius: 2.62,

              elevation: 4,
            }}>
            <Text
              style={{color: 'white', fontFamily: Fonts.ubuntu, fontSize: 18}}>
              Delete
            </Text>
          </TouchableOpacity>
        </View>
      );
    }
  }
  nextAction(nextOrEdit) {
    let data = this.apartmentData;
    if (data.name !== null) {
      if (data.address !== null) {
        if (data.signContractDate !== null) {
          if (data.endContractDate !== null) {
            if (data.rent !== null) {
              if (nextOrEdit) {
                history.push(this, '/uploadImage', {create: true});
              } else {
                this.editAction();
              }
            } else {
              var msg = 'Please input ' + this.store.text.rent;
              this.alertAction(msg);
            }
          } else {
            var msg = 'Please input ' + this.store.text.contractExpiryDate;
            this.alertAction(msg);
          }
        } else {
          var msg = 'Please input ' + this.store.text.dateOfContract;
          this.alertAction(msg);
        }
      } else {
        var msg = 'Please input ' + this.store.text.address;
        this.alertAction(msg);
      }
    } else {
      var msg = 'Please input ' + this.store.text.apartment;
      this.alertAction(msg);
    }
  }

  showDatetimePicker() {
    console.log('App started in', initialMode, 'mode');
    var color = 'white';
    if (initialMode === 'dark') {
      color = 'black';
    }
    if (this.DatePickervisable) {
      return (
        <View style={{backgroundColor: color}}>
          <DateTimePicker
            value={this.whichDate()}
            mode="date"
            is24Hour={true}
            display="default"
            onChange={this.handleDatePicked}
          />
        </View>
      );
    } else {
      return null;
    }
  }

  async clickAction(action) {
    switch (action) {
      case 'contractDate':
        this.DatePickervisable = true;
        break;
      case 'payDay':
        this.wheelSelected = 'payDay';

        break;
      case 'rentFreePeriod':
        this.wheelSelectData = [];
        for (var i = 0; i <= 90; i++) {
          this.wheelSelectData.push(i);
        }
        this.wheelSelected = 'rentFreePeriod';
        this.picker.toggle();
        break;
      case 'noteLeasebackMonth':
        this.wheelSelectData = [];
        for (var i = 1; i <= 12; i++) {
          this.wheelSelectData.push(i);
        }
        this.wheelSelected = 'noteLeasebackMonth';
        this.picker.toggle();
        break;

      case 'monthOfpaymentInLieuOfNotice':
        this.wheelSelectData = [];
        for (var i = 1; i <= 12; i++) {
          this.wheelSelectData.push(i);
        }
        this.wheelSelected = 'monthOfpaymentInLieuOfNotice';
        this.picker.toggle();
        break;
      case 'atleastRentOfmonth':
        this.wheelSelectData = [];
        for (var i = 1; i <= 36; i++) {
          this.wheelSelectData.push(i);
        }
        this.wheelSelected = 'atleastRentOfmonth';
        this.picker.toggle();
        break;
      case 'whoPayManagementFee':
        this.wheelSelectData = ['業主 Landlord', '租客 Tenant'];

        this.wheelSelected = 'whoPayManagementFee';
        this.picker.toggle();
        break;

      case 'whoPayGovernemtRate':
        this.wheelSelectData = ['業主 Landlord', '租客 Tenant'];
        this.wheelSelected = 'whoPayGovernemtRate';
        this.picker.toggle();
        break;
      case 'whoPayGovernmentRent':
        this.wheelSelectData = ['業主 Landlord', '租客 Tenant'];
        this.wheelSelected = 'whoPayGovernmentRent';
        this.picker.toggle();
        break;
    }
  }

  charSelectedHandler(char, which) {
    if (which) {
      if (char == 'owner') {
        return '業主 Landlord';
      } else {
        return '租客 Tenant';
      }
    } else {
      if (char == '業主 Landlord') {
        return 'owner';
      } else {
        return 'tenant';
      }
    }
  }

  appliancesSelecterColorsReturn(value, which) {
    switch (which) {
      case 'sub':
        if (value == 0) {
          return colors.line2Color;
        } else {
          return 'black';
        }
        break;
      case 'add':
        if (value <= 19) {
          return 'black';
        } else {
          return colors.line2Color;
        }
        break;
      case 'buttonBackground':
        if (value > 0) {
          return colors.mainColor;
        } else {
          return 'white';
        }
        break;
    }
  }

  appliancesSelecterClickAction(index, which) {
    if (which) {
      if (this.contractData.appliances[index].value <= 19) {
        this.contractData.appliances[index].value += 1;
      }
    } else {
      if (this.contractData.appliances[index].value > 0) {
        this.contractData.appliances[index].value -= 1;
      }
    }
  }

  renderAppliancesItems() {
    return this.contractData.appliances.map((items, index) => {
      return (
        <View
          style={{
            flexDirection: 'row',
            marginTop: 20,
          }}>
          <View style={{flex: 0.8, flexDirection: 'row', alignItems: 'center'}}>
            {index > 15 ? (
              <TouchableOpacity
                style={{
                  width: 15,
                  height: 15,
                  marginRight: 10,
                  borderRadius: 30,
                  backgroundColor: 'red',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.contractData.appliances.splice(index, 1);
                }}>
                <Icon name={'minus'} color={'white'} size={10} />
              </TouchableOpacity>
            ) : (
              <View />
            )}
            <View>
              <Text>{items.chineseName}</Text>
              {items.englishName == '' ? (
                <View />
              ) : (
                <Text>{items.englishName}</Text>
              )}
            </View>
          </View>
          <View style={{flex: 0.2}}>
            <View
              style={{
                height: 30,
                width: 80,
                borderColor: colors.line2Color,
                backgroundColor: this.appliancesSelecterColorsReturn(
                  items.value,
                  'buttonBackground',
                ),
                borderWidth: 1,
                borderRadius: 20,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <TouchableOpacity
                style={{
                  flex: 0.333,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.appliancesSelecterClickAction(index, false);
                }}>
                <Text
                  style={{
                    color: this.appliancesSelecterColorsReturn(
                      items.value,
                      'sub',
                    ),
                  }}>
                  -
                </Text>
              </TouchableOpacity>
              <View
                style={{
                  flex: 0.333,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text>{items.value}</Text>
              </View>
              <TouchableOpacity
                style={{
                  flex: 0.333,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.appliancesSelecterClickAction(index, true);
                }}>
                <Text
                  style={{
                    color: this.appliancesSelecterColorsReturn(
                      items.value,
                      'add',
                    ),
                  }}>
                  +
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      );
    });
  }

  keySelecterClickAction(index, which) {
    if (which) {
      if (this.contractData.key[index].value <= 19) {
        this.contractData.key[index].value += 1;
      }
    } else {
      if (this.contractData.key[index].value > 0) {
        this.contractData.key[index].value -= 1;
      }
    }
  }

  renderKeyItems() {
    return this.contractData.key.map((items, index) => {
      return (
        <View
          style={{
            flexDirection: 'row',
            marginTop: 20,
          }}>
          <View style={{flex: 0.8, flexDirection: 'row', alignItems: 'center'}}>
            {index > 4 ? (
              <TouchableOpacity
                style={{
                  width: 15,
                  height: 15,
                  marginRight: 10,
                  borderRadius: 30,
                  backgroundColor: 'red',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.contractData.key.splice(index, 1);
                }}>
                <Icon name={'minus'} color={'white'} size={10} />
              </TouchableOpacity>
            ) : (
              <View />
            )}
            <View>
              <Text>{items.chineseName}</Text>
              {items.englishName == '' ? (
                <View />
              ) : (
                <Text>{items.englishName}</Text>
              )}
            </View>
          </View>
          <View style={{flex: 0.2}}>
            <View
              style={{
                height: 30,
                width: 80,
                borderColor: colors.line2Color,
                backgroundColor: this.appliancesSelecterColorsReturn(
                  items.value,
                  'buttonBackground',
                ),
                borderWidth: 1,
                borderRadius: 20,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <TouchableOpacity
                style={{
                  flex: 0.333,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.keySelecterClickAction(index, false);
                }}>
                <Text
                  style={{
                    color: this.appliancesSelecterColorsReturn(
                      items.value,
                      'sub',
                    ),
                  }}>
                  -
                </Text>
              </TouchableOpacity>
              <View
                style={{
                  flex: 0.333,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text>{items.value}</Text>
              </View>
              <TouchableOpacity
                style={{
                  flex: 0.333,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.keySelecterClickAction(index, true);
                }}>
                <Text
                  style={{
                    color: this.appliancesSelecterColorsReturn(
                      items.value,
                      'add',
                    ),
                  }}>
                  +
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      );
    });
  }

  wheelSelectAction(actin, value) {
    switch (actin) {
      case 'payDay':
        this.contractData.payRentDate = value;
        break;
      case 'rentFreePeriod':
        this.contractData.rentFreePeriod = value;
        break;
      case 'noteLeasebackMonth':
        this.contractData.noteLeasebackMonth = value;
        break;
      case 'monthOfpaymentInLieuOfNotice':
        this.contractData.monthOfpaymentInLieuOfNotice = value;
        break;
      case 'atleastRentOfmonth':
        this.contractData.atleastRentOfmonth = value;
        break;
      case 'whoPayManagementFee':
        this.contractData.whoPayManagementFee = this.charSelectedHandler(
          value,
          false,
        );
        break;
      case 'whoPayGovernemtRate':
        this.contractData.whoPayGovernemtRate = this.charSelectedHandler(
          value,
          false,
        );
        break;
      case 'whoPayGovernmentRent':
        this.contractData.whoPayGovernmentRent = this.charSelectedHandler(
          value,
          false,
        );
        break;
    }
  }

  async selectServiceAction(serviceId, selected) {
    if (selected) {
      var data = {id: serviceId};
      this.contractData.services.push(data);
      console.log(this.contractData.services);
    } else {
      var serviceIndex = await this.contractData.services.findIndex(
        element => element.id == serviceId,
      );
      this.contractData.services.splice(serviceIndex, 1);
      console.log(this.contractData.services);
    }
  }

  renderService(items) {
    //check-square
    //square
    if (items.status === 'A') {
      return (
        <View
          style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}>
          {items.select ? (
            <TouchableOpacity
              onPress={() => {
                this.selectServiceAction(items.id, !items.select);
                items.select = !items.select;
              }}>
              <Icon name="check-square" color={colors.mainColor} size={20} />
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              onPress={() => {
                this.selectServiceAction(items.id, !items.select);
                items.select = !items.select;
              }}>
              <Icon name="square" color={colors.mainColor} size={20} />
            </TouchableOpacity>
          )}
          <Text style={[styles.subtitle, {marginLeft: 10}]}>{items.name}</Text>
          <Text style={[styles.subtitle, {marginLeft: 10}]}>
            {this.currencyFormat(items.price)}
          </Text>
        </View>
      );
    }
  }

  renderList(which, action, title, content) {
    if (which) {
      return (
        <TouchableOpacity
          style={styles.inputTextView}
          onPress={() => {
            this.clickAction(action);
          }}>
          <Text style={styles.inputTextTitleView}>{title}</Text>

          <View style={{flexDirection: 'row', marginBottom: 5}}>
            <View style={{flex: 0.8}}>
              <Text
                style={{
                  fontSize: 20,
                  color: 'black',
                  fontFamily: Fonts.ubuntuTh,
                }}>
                {content}
              </Text>
            </View>
            <View style={{flex: 0.2, alignItems: 'flex-end'}}>
              <Icon
                name="chevron-down"
                color={'black'}
                size={20}
                style={{marginRight: 10}}
              />
            </View>
          </View>
        </TouchableOpacity>
      );
    } else {
      return <View></View>;
    }
  }

  async selectWheelDataHandler(action) {
    switch (action) {
      case 'payDay':
        this.wheelSelected = 'payDay';
        return this.number1_28;
        break;
      case 'rentFreePeriod':
        this.wheelSelectData = [];
        for (var i = 0; i <= 90; i++) {
          this.wheelSelectData.push(i);
        }
        this.wheelSelected = 'rentFreePeriod';
        this.picker.toggle();
        break;
      case 'noteLeasebackMonth':
        this.wheelSelectData = [];
        for (var i = 1; i <= 12; i++) {
          this.wheelSelectData.push(i);
        }
        this.wheelSelected = 'noteLeasebackMonth';
        this.picker.toggle();
        break;

      case 'monthOfpaymentInLieuOfNotice':
        this.wheelSelectData = [];
        for (var i = 1; i <= 12; i++) {
          this.wheelSelectData.push(i);
        }
        this.wheelSelected = 'monthOfpaymentInLieuOfNotice';
        this.picker.toggle();
        break;
      case 'atleastRentOfmonth':
        this.wheelSelectData = [];
        for (var i = 1; i <= 36; i++) {
          this.wheelSelectData.push(i);
        }
        this.wheelSelected = 'atleastRentOfmonth';
        this.picker.toggle();
        break;
      case 'whoPayManagementFee':
        this.wheelSelectData = ['業主 Landlord', '租客 Tenant'];

        this.wheelSelected = 'whoPayManagementFee';
        this.picker.toggle();
        break;

      case 'whoPayGovernemtRate':
        this.wheelSelectData = ['業主 Landlord', '租客 Tenant'];
        this.wheelSelected = 'whoPayGovernemtRate';
        this.picker.toggle();
        break;
      case 'whoPayGovernmentRent':
        this.wheelSelectData = ['業主 Landlord', '租客 Tenant'];
        this.wheelSelected = 'whoPayGovernmentRent';
        this.picker.toggle();
        break;
    }
  }

  selectList(which, action, title, content, data) {
    //this.clickAction(action);
    this.wheelSelected = action;
    if (which) {
      return (
        <View style={styles.inputTextView}>
          <Text style={styles.inputTextTitleView}>{title}</Text>

          <Menu
            name={action}
            renderer={SlideInMenu}
            onSelect={value => {
              // this.store.apartmentData.floor = value;
              this.wheelSelectAction(action, value);
            }}>
            <MenuTrigger style={{flexDirection: 'row', marginBottom: 5}}>
              <View style={{flex: 0.8}}>
                <Text
                  style={{
                    fontSize: 20,
                    color: 'black',
                    fontFamily: Fonts.ubuntuTh,
                  }}>
                  {content}
                </Text>
              </View>
              <View style={{flex: 0.2, alignItems: 'flex-end'}}>
                <Icon
                  name="chevron-down"
                  color={'black'}
                  size={20}
                  style={{marginRight: 10}}
                />
              </View>
            </MenuTrigger>
            <MenuOptions
              customStyles={{
                optionText: {
                  margin: 5,
                  fontFamily: Fonts.ubuntu,
                  color: 'white',
                  fontSize: 20,
                },
                optionWrapper: {
                  backgroundColor: colors.mainColor,
                  alignItems: 'center',
                },
              }}>
              <FlatList
                data={data}
                renderItem={({item}) => <MenuOption value={item} text={item} />}
                style={{height: 300}}
              />
            </MenuOptions>
          </Menu>
        </View>
      );
    } else {
      return <View></View>;
    }
  }

  charList(which, action, title, content, data) {
    //this.clickAction(action);
    this.wheelSelected = action;
    if (which) {
      return (
        <View style={styles.inputTextView}>
          <Text style={styles.inputTextTitleView}>{title}</Text>

          <Menu
            name={action}
            renderer={SlideInMenu}
            onSelect={value => {
              // this.store.apartmentData.floor = value;
              this.wheelSelectAction(action, value);
            }}>
            <MenuTrigger style={{flexDirection: 'row', marginBottom: 5}}>
              <View style={{flex: 0.8}}>
                <Text
                  style={{
                    fontSize: 20,
                    color: 'black',
                    fontFamily: Fonts.ubuntuTh,
                  }}>
                  {content}
                </Text>
              </View>
              <View style={{flex: 0.2, alignItems: 'flex-end'}}>
                <Icon
                  name="chevron-down"
                  color={'black'}
                  size={20}
                  style={{marginRight: 10}}
                />
              </View>
            </MenuTrigger>
            <MenuOptions
              customStyles={{
                optionText: {
                  margin: 5,
                  fontFamily: Fonts.ubuntu,
                  color: 'white',
                  fontSize: 20,
                },
                optionWrapper: {
                  backgroundColor: colors.mainColor,
                  alignItems: 'center',
                },
              }}>
              <FlatList
                data={data}
                renderItem={({item}) => <MenuOption value={item} text={item} />}
              />
            </MenuOptions>
          </Menu>
        </View>
      );
    } else {
      return <View></View>;
    }
  }

  completeClickAcion() {
    console.log(this.contractData);
    history.push(this, '/newLease', {
      contractData: this.contractData,
      showSign: true,
    });
  }

  appliancesClickAction() {
    this.addAppliancesVisable = false;
    this.contractData.appliances.push(this.newAppliances);
  }

  keyClickAction() {
    this.addKeyVisable = false;
    this.contractData.key.push(this.newKey);
  }

  render() {
    return (
      <MenuProvider style={{flex: 1, backgroundColor: 'white'}}>
        <View
          style={{
            width: width,
            height: Platform.OS === 'ios' ? 65 : 80,
            backgroundColor: colors.mainColor,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text
            style={{fontFamily: Fonts.ubuntu, color: 'white', fontSize: 20}}>
            {this.store.text.add + this.store.text.addContract}
          </Text>
          {this.renderBackIcon()}

          <TouchableOpacity
            onPress={() => {
              this.completeClickAcion();
            }}
            style={{
              position: 'absolute',
              right: 20,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text
              style={{
                fontFamily: Fonts.ubuntu,
                fontSize: 17,
                color: 'white',
              }}>
              {this.store.text.complete}
            </Text>
          </TouchableOpacity>
        </View>
        <KeyboardAwareScrollView style={{flex: 1}}>
          <View style={{marginLeft: 20, marginRight: 20}}>
            <Text style={styles.title}>{'基本資料'}</Text>
            <Text style={styles.subtitle}>{'請選擇'}</Text>
            {this.renderList(
              true,
              'contractDate',
              this.store.text.dateOfContract,
              moment(this.contractData.signContractDate).format('DD/MM/YYYY'),
            )}
            {this.selectList(
              true,
              'payDay',
              '每月交租日',
              this.contractData.payRentDate,
              this.number1_28,
            )}

            <View style={styles.inputTextView}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.rent}
              </Text>

              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 0.8}}>
                  <Text
                    style={{
                      fontSize: 20,
                      color: 'black',
                      fontFamily: Fonts.ubuntuTh,
                    }}>
                    {'HKD ' + this.apartmentData.rent}
                  </Text>
                </View>
              </View>
            </View>
            <View style={styles.inputTextView}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.deposit}
              </Text>

              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 0.8}}>
                  <Text
                    style={{
                      fontSize: 20,
                      color: 'black',
                      fontFamily: Fonts.ubuntuTh,
                    }}>
                    {'HKD ' + this.apartmentData.deposit}
                  </Text>
                </View>
              </View>
            </View>
            <View style={styles.inputTextView}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.lease}
              </Text>

              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 0.8}}>
                  <Text
                    style={{
                      fontSize: 20,
                      color: 'black',
                      fontFamily: Fonts.ubuntuTh,
                    }}>
                    {this.apartmentData.leaseMonth + this.store.text.months}
                  </Text>
                </View>
              </View>
            </View>
            {this.selectList(
              true,
              'rentFreePeriod',
              '租客免租期',
              this.contractData.rentFreePeriod + '天',
              this.number1_90,
            )}
            <Text>
              {'(由' +
                moment(this.contractData.signContractDate).format(
                  'DD/MM/YYYY',
                ) +
                '至' +
                moment(this.contractData.signContractDate)
                  .add(parseInt(this.contractData.rentFreePeriod), 'days')
                  .format('DD/MM/YYYY') +
                ')'}
            </Text>
          </View>
          <View
            style={{
              marginTop: 30,
              width: width,
              backgroundColor: '#E5E7E9',
              height: 7,
              borderTopColor: '#D7DBDD',
              borderBottomColor: '#D7DBDD',
              borderTopWidth: 1,
              borderBottomWidth: 1,
            }}
          />
          <View style={{marginLeft: 20, marginRight: 20}}>
            <Text style={styles.title}>{'退租條款'}</Text>
            <Text style={styles.subtitle}>{'請選擇'}</Text>
            {this.selectList(
              true,
              'noteLeasebackMonth',
              '租客及業主可給予對方不少於' +
                this.contractData.noteLeasebackMonth +
                '個月的書面通知',
              this.contractData.noteLeasebackMonth,
              this.number1_12,
            )}
            {this.selectList(
              true,
              'monthOfpaymentInLieuOfNotice',
              this.contractData.monthOfpaymentInLieuOfNotice +
                '個月租金作代通知金提早解除此租約',
              this.contractData.monthOfpaymentInLieuOfNotice,
              this.number1_12,
            )}
            {this.selectList(
              true,
              'atleastRentOfmonth',
              '唯此租約的終止日期不得早於由租期開始日計' +
                this.contractData.atleastRentOfmonth +
                '個月',
              this.contractData.atleastRentOfmonth,
              this.number1_12,
            )}
            <Text>
              {'(即租客最少要租用該物業' +
                this.contractData.atleastRentOfmonth +
                '個月)'}
            </Text>
          </View>
          <View
            style={{
              marginTop: 30,
              width: width,
              backgroundColor: '#E5E7E9',
              height: 7,
              borderTopColor: '#D7DBDD',
              borderBottomColor: '#D7DBDD',
              borderTopWidth: 1,
              borderBottomWidth: 1,
            }}
          />
          <View style={{marginLeft: 20, marginRight: 20}}>
            <Text style={styles.title}>{'物業費用'}</Text>
            <Text style={styles.subtitle}>{'請選擇費用會由哪方負責'}</Text>
            {this.charList(
              true,
              'whoPayManagementFee',
              '管理費 Management Fee',
              this.charSelectedHandler(
                this.contractData.whoPayManagementFee,
                true,
              ),
              whichChar
            )}
            {this.charList(
              true,
              'whoPayGovernemtRate',
              '差餉 Governament Rate',
              this.charSelectedHandler(
                this.contractData.whoPayGovernemtRate,
                true,
              ),
              whichChar
            )}

            {this.charList(
              true,
              'whoPayGovernmentRent',
              '地租 Government Rent',
              this.charSelectedHandler(
                this.contractData.whoPayGovernmentRent,
                true,
              ),
              whichChar
            )}
          </View>
          <View
            style={{
              marginTop: 30,
              width: width,
              backgroundColor: '#E5E7E9',
              height: 7,
              borderTopColor: '#D7DBDD',
              borderBottomColor: '#D7DBDD',
              borderTopWidth: 1,
              borderBottomWidth: 1,
            }}
          />
          <View style={{marginLeft: 20, marginRight: 20}}>
            <View style={{flexDirection: 'row'}}>
              <View style={{flex: 0.9}}>
                <Text style={styles.title}>{'電器及傢俬'}</Text>
                <Text style={styles.subtitle}>
                  {'業主提供以下電器予租客使用'}
                </Text>
                <Text style={styles.subtitle}>
                  {
                    'Landlord provides the foolowing applinaces for Tenant to use'
                  }
                </Text>
              </View>
              <View
                style={{
                  flex: 0.1,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <TouchableOpacity
                  onPress={() => {
                    this.addAppliancesVisable = true;
                    this.newKey = {
                      chineseName: '',
                      englishName: '',
                      value: 0,
                    };
                  }}>
                  <Text style={{fontSize: 30, color: colors.mainColor}}>+</Text>
                </TouchableOpacity>
              </View>
            </View>
            {this.renderAppliancesItems()}
          </View>
          <View style={{marginLeft: 20, marginRight: 20}}>
            <View style={{flexDirection: 'row'}}>
              <View style={{flex: 0.9}}>
                <Text style={styles.title}>{'鎖匙'}</Text>
                <Text style={styles.subtitle}>{'業主給予租客保管的鎖匙'}</Text>
                <Text style={styles.subtitle}>
                  {'The key given to the tenant by the landlord for keeping'}
                </Text>
              </View>
              <View
                style={{
                  flex: 0.1,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <TouchableOpacity
                  onPress={() => {
                    this.addKeyVisable = true;
                    this.newAppliances = {
                      chineseName: '',
                      englishName: '',
                      value: 0,
                    };
                  }}>
                  <Text style={{fontSize: 30, color: colors.mainColor}}>+</Text>
                </TouchableOpacity>
              </View>
            </View>
            {this.renderKeyItems()}
          </View>
          <View
            style={{
              marginTop: 30,
              width: width,
              backgroundColor: '#E5E7E9',
              height: 7,
              borderTopColor: '#D7DBDD',
              borderBottomColor: '#D7DBDD',
              borderTopWidth: 1,
              borderBottomWidth: 1,
            }}
          />
          <View style={{marginLeft: 20, marginRight: 20}}>
            <Text style={styles.title}>{this.store.text.service}</Text>
            <Text style={styles.subtitle}>{'請選擇'}</Text>
            {this.store.serviceContent.map((items, index) => {
              return this.renderService(items);
            })}
          </View>
          <View
            style={{
              marginTop: 30,
              width: width,
              backgroundColor: '#E5E7E9',
              height: 7,
              borderTopColor: '#D7DBDD',
              borderBottomColor: '#D7DBDD',
              borderTopWidth: 1,
              borderBottomWidth: 1,
            }}
          />
          <View style={{marginLeft: 20, marginRight: 20}}>
            <Text style={styles.title}>{'業主收租之銀行戶口'}</Text>
            <View style={[styles.inputTextView, {height: 65}]}>
              <Text style={styles.inputTextTitleView}>
                {'業主收租之銀行戶口'}
              </Text>
              <Text
                style={
                  styles.inputTextTitleView
                }>{`Landlord's bank account for reeiving rent payment`}</Text>
              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 0.8}}>
                  <TextInput
                    style={{
                      fontSize: 20,
                      color: 'black',
                      fontFamily: Fonts.ubuntuTh,
                    }}
                    value={this.contractData.ownerPaymentAc}
                    onChangeText={text => {
                      this.contractData.ownerPaymentAc = text;
                    }}
                    underlineColorAndroid="rgba(0,0,0,0)"
                  />
                </View>
                <TouchableOpacity
                  style={{flex: 0.2, alignItems: 'flex-end'}}
                  onPress={() => {
                    this.contractData.ownerPaymentAc = '';
                  }}>
                  <Icon
                    name="times-circle"
                    color={colors.line2Color}
                    size={15}
                    solid
                    style={{marginRight: 10}}
                  />
                </TouchableOpacity>
              </View>
            </View>
          </View>
          <View
            style={{
              marginTop: 30,
              width: width,
              backgroundColor: '#E5E7E9',
              height: 7,
              borderTopColor: '#D7DBDD',
              borderBottomColor: '#D7DBDD',
              borderTopWidth: 1,
              borderBottomWidth: 1,
            }}
          />
          <View style={{marginLeft: 20, marginRight: 20, marginBottom: 50}}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <View style={{flex: 0.9, justifyContent: 'center'}}>
                <Text style={styles.title}>{'其它'}</Text>
              </View>
              <View
                style={{
                  flex: 0.1,
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginTop: 15,
                }}>
                <TouchableOpacity
                  style={{justifyContent: 'center', alignItems: 'center'}}
                  onPress={() => {
                    this.contractData.remark.push('');
                  }}>
                  <Text style={{fontSize: 20}}>+</Text>
                </TouchableOpacity>
              </View>
            </View>
            {this.renderRemark()}
          </View>
          <DateTimePicker
            value={this.contractData.signContractDate}
            mode={'date'}
            isVisible={this.DatePickervisable}
            onConfirm={this.handleDatePicked}
            isDarkModeEnabled={this.drakMode}
            onCancel={() => {
              this.DatePickervisable = false;
            }}
          />
          <Modal
            visible={this.addAppliancesVisable}
            width={0.7}
            height={0.2}
            onTouchOutside={() => {
              this.addAppliancesVisable = false;
            }}
            swipeDirection={['up', 'down']} // can be string or an array
            swipeThreshold={200} // default 100
            onSwipeOut={event => {
              this.addAppliancesVisable = false;
            }}>
            <ModalContent>
              <View
                style={{
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <View
                  style={styles.inputTextView}
                  onPress={() => {
                    this.clickAction(action);
                  }}>
                  <Text style={styles.inputTextTitleView}>{'電器名稱'}</Text>

                  <View style={{flexDirection: 'row', marginBottom: 5}}>
                    <View style={{width: 250}}>
                      <TextInput
                        style={{
                          fontSize: 20,
                          color: 'black',
                          fontFamily: Fonts.ubuntuTh,
                        }}
                        value={this.newAppliances.chineseName}
                        onChangeText={text => {
                          this.newAppliances.chineseName = text;
                        }}
                        underlineColorAndroid="rgba(0,0,0,0)"
                      />
                    </View>
                  </View>
                </View>
                <TouchableOpacity
                  style={{
                    backgroundColor: colors.mainColor,
                    width: 70,
                    height: 40,
                    marginTop: 30,
                    borderRadius: 10,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                  onPress={() => {
                    this.appliancesClickAction();
                  }}>
                  <Text style={{color: 'white'}}>確定</Text>
                </TouchableOpacity>
              </View>
            </ModalContent>
          </Modal>
          <Modal
            visible={this.addKeyVisable}
            width={0.7}
            height={0.2}
            onTouchOutside={() => {
              this.addKeyVisable = false;
            }}
            swipeDirection={['up', 'down']} // can be string or an array
            swipeThreshold={200} // default 100
            onSwipeOut={event => {
              this.addKeyVisable = false;
            }}>
            <ModalContent>
              <View
                style={{
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <View
                  style={styles.inputTextView}
                  onPress={() => {
                    this.clickAction(action);
                  }}>
                  <Text style={styles.inputTextTitleView}>{'鎖匙名稱'}</Text>

                  <View style={{flexDirection: 'row', marginBottom: 5}}>
                    <View style={{width: 250}}>
                      <TextInput
                        style={{
                          fontSize: 20,
                          color: 'black',
                          fontFamily: Fonts.ubuntuTh,
                        }}
                        value={this.newKey.chineseName}
                        onChangeText={text => {
                          this.newKey.chineseName = text;
                        }}
                        underlineColorAndroid="rgba(0,0,0,0)"
                      />
                    </View>
                  </View>
                </View>
                <TouchableOpacity
                  style={{
                    backgroundColor: colors.mainColor,
                    width: 70,
                    height: 40,
                    marginTop: 30,
                    borderRadius: 10,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                  onPress={() => {
                    this.keyClickAction();
                  }}>
                  <Text style={{color: 'white'}}>確定</Text>
                </TouchableOpacity>
              </View>
            </ModalContent>
          </Modal>
        </KeyboardAwareScrollView>
        {/* <Picker
          ref={picker => (this.picker = picker)}
          style={{height: 260, backgroundColor: 'white'}}
          pickerTitleStyle={{color: 'white'}}
          pickerBtnStyle={{color: colors.mainColor, fontFamily: Fonts.ubuntu}}
          pickerToolBarStyle={{backgroundColor: 'white'}}
          showMask={true}
          showDuration={300}
          pickerData={this.wheelSelectData}
          selectedValue={1}
          onPickerDone={pickedValue => {
            this.wheelSelectAction(pickedValue);
          }}
        /> */}
      </MenuProvider>
    );
  }
}

const styles = StyleSheet.flatten({
  button: {
    marginTop: 20,
    width: width,
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.statusBarColor,
  },
  inputTextView: {
    marginTop: 20,
    borderBottomWidth: 1,
    borderBottomColor: colors.line2Color,
    height: 50,
  },
  inputTextTitleView: {
    fontFamily: Fonts.ubuntuL,
    fontSize: 14,
    color: colors.line2Color,
  },
  title: {
    fontFamily: Fonts.ubuntu,
    fontSize: 17,
    marginTop: 20,
  },
  subtitle: {
    fontFamily: Fonts.ubuntu,
    fontSize: 14,
  },
  buttonText: {
    color: '#fff',
  },
  picker: {
    fontSize: 20,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  textView: {
    color: colors.mainColor,
    fontFamily: Fonts.ubuntu,
    fontSize: size.getSize(20),
    fontWeight: 'bold',
  },
});
const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'black',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
});
