import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Picker,
  TextInput,
  ScrollView,
  Alert,
} 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 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';

const size = new Size();

@inject('appStore')
@observer
export default class ContractData extends Component {
  @observable
  dialogInputVisable = false;
  @observable
  whichDatePicker = 0;
  @observable
  whichInput = 0;
  @observable
  apartmentData = {};
  @observable
  contractData = {
    apartmentid: '',
    apartmentName: '',
    ownerName: '',
    ownerId: '',
    ownerContactAddress: '',
    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;
    }
  }

  init() {
    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.tenantSignUri = this.dataReturn('tenantSignUri');
    this.contractData.ownersigndate = this.dataReturn('ownersigndate');
    this.contractData.tenantsigndate = this.dataReturn('tenantsigndate');
    console.log(this.apartmentData.signContractDate);
  }

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

      case 'tenantSignUri':
        // if(this.apartmentData.tenant.hasOwnProperty('sign')){

        //   return this.apartmentData.tenant.sign
        // }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 => {
    console.log('A date has been picked: ', date);
    // this.hideDateTimePicker();

    if (this.whichDatePicker === 0) {
      this.apartmentData.signContractDate = date;
    } else {
      this.apartmentData.endContractDate = date;
    }
    this.DatePickervisable = false;
  };

  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},
    );
  }

  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);
    }
  }

  renderRemark() {
    if (this.contractData.remark !== undefined) {
      if (this.contractData.remark.length > 0) {
        return this.contractData.remark.map((item, index) => {
          return (
            <View
              style={{
                backgroundColor: colors.inputBgc,
                marginLeft: 20,
                marginRight: 20,
                marginTop: 40,
                height: verticalScale(40),
                borderRadius: 5,
              }}>
              <TextInput
                style={{
                  // backgroundColor:theme.inputBgc,
                  color: 'gary',
                  height: verticalScale(35),
                  marginBottom: moderateScale(30),
                  paddingBottom: 0,
                  fontSize: size.getSize(15),
                  paddingRight: 20,
                  paddingLeft: 20,
                  //fontFamily:Fonts.century
                }}
                value={this.contractData.remark[index]}
                underlineColorAndroid="rgba(0,0,0,0)"
                onChangeText={text => (this.contractData.remark[index] = text)}
                placeholder={this.store.text.remark + '...'}
                placeholderStyle={{fontFamily: Fonts.ubuntuL}}
                placeholderTextColor={'gary'}
                blurOnSubmit={false}
              />
              <Icon
                name={'times-circle'}
                style={{position: 'absolute', top: -30, right: 0}}
                size={30}
                solid
                color={colors.mainColor}
                onPress={() => {
                  this.removeRemark(index);
                }}
              />
            </View>
          );
        });
      } else {
        return null;
      }
    } else {
      return null;
    }
  }

  whichInputTextReturn(which) {
    // if (which) {
    //   if (this.whichInput === 0) {
    //     return this.store.text.apartment
    //   } else if (this.whichInput === 1) {
    //     return this.store.text.address
    //   } else {
    //     return this.store.text.rent
    //   }
    // } else {
    //   if (this.whichInput === 0) {
    //     return this.apartmentData.name
    //   } else if (this.whichInput === 1) {
    //     return this.apartmentData.address
    //   } else {
    //     return this.apartmentData.rent
    //   }
    // }

    if (which) {
      switch (this.whichInput) {
        case 0:
          return this.store.text.ownerName;
          break;

        case 1:
          return this.store.text.tenantName;
          break;

        case 2:
          return this.store.text.ownerPhone;
          break;

        case 3:
          return this.store.text.tenantPhone;
          break;

        case 4:
          return this.store.text.ownerId;
          break;

        case 5:
          return this.store.text.tenantId;
          break;

        case 6:
          return this.store.text.ownerContactAddress;
          break;

        case 7:
          return this.store.text.tenantContactAddress;
          break;

        case 8:
          return this.store.text.rent;
          break;

        case 9:
          return this.store.text.rates;
          break;

        case 10:
          return this.store.text.managementFee;
          break;

        case 11:
          return this.store.text.deposit;
          break;
        case 12:
          this.contractData.address;
          break;
      }
    } else {
      switch (this.whichInput) {
        case 0:
          return this.contractData.ownerName;
          break;

        case 1:
          return this.contractData.tenantName;
          break;

        case 2:
          return this.contractData.ownerPhone;
          break;

        case 3:
          return this.contractData.tenantPhone;
          break;

        case 4:
          return this.contractData.ownerId;
          break;

        case 5:
          return this.contractData.tenantId;
          break;

        case 6:
          return this.contractData.ownerContactAddress;
          break;

        case 7:
          return this.contractData.tenantContactAddress;
          break;

        case 8:
          return this.contractData.rent;
          break;

        case 9:
          return this.contractData.rates;
          break;

        case 10:
          return this.contractData.managementFee;
          break;

        case 11:
          return this.contractData.deposit;
          break;
        case 12:
          this.contractData.apartmentAddress;
          break;
      }
    }
  }

  whichDataToBeChange(value) {
    switch (this.whichInput) {
      case 0:
        this.contractData.ownerName = value;
        break;

      case 1:
        this.contractData.tenantName = value;
        break;

      case 2:
        this.contractData.ownerPhone = value;
        break;

      case 3:
        this.contractData.tenantPhone = value;
        break;

      case 4:
        this.contractData.ownerId = value;
        break;

      case 5:
        this.contractData.tenantId = value;
        break;

      case 6:
        this.contractData.ownerContactAddress = value;
        break;

      case 7:
        this.contractData.tenantContactAddress = value;
        break;

      case 8:
        this.contractData.rent = value;
        break;

      case 9:
        this.contractData.rates = value;
        break;

      case 10:
        this.contractData.managementFee = value;
        break;

      case 11:
        this.contractData.deposit = value;
        break;
      case 12:
        this.contractData.apartmentAddress = value;
        break;
    }
  }

  avatarHander(which) {
    if (which) {
      ImagePicker.openCamera({
        includeBase64: true,
        writeTempFile: false,
        cropping: false,
      }).then(image => {
        console.log(image);
        const response = image;
        // history.push(this,'/cropImage',{response})
        this.apartmentData.avatar = response.path;
      });
    } else {
      ImagePicker.openPicker({
        includeBase64: true,
        writeTempFile: false,
        cropping: false,
      }).then(image => {
        console.log(image);
        const response = image;
        this.store.avatar = response.path;
      });
    }
    this.dialogPhotoVisable = false;
  }

  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;
    }
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <BackHeader instance={this} back={true} />
        <KeyboardAwareScrollView style={{flex: 1}}>
          <View
            style={{
              marginLeft: 20,
              flexDirection: 'row',
              marginTop: 20,
            }}></View>
          <View style={{flex: 1, alignSelf: 'center'}}>
            <IconTextInput
              leftFlex={0.5}
              editable={true}
              rightFlex={0.5}
              iconStyle={true}
              title={this.store.text.ownerName}
              content={this.contractData.ownerName}
              icon="edit"
              keyboardType={'default'}
              onChangeText={text => (this.contractData.ownerName = text)}
              type="input"
            />
            <IconTextInput
              leftFlex={0.5}
              editable={true}
              rightFlex={0.5}
              iconStyle={true}
              title={this.store.text.tenantName}
              content={this.contractData.tenantName}
              icon="edit"
              type="input"
              keyboardType={'default'}
              onChangeText={text => (this.contractData.tenantName = text)}
            />
            <IconTextInput
              leftFlex={4}
              editable={true}
              rightFlex={6}
              iconStyle={true}
              title={this.store.text.ownerPhone}
              content={this.contractData.ownerPhone}
              icon="edit"
              type="input"
              keyboardType={'numeric'}
              onChangeText={text => (this.contractData.ownerPhone = text)}
            />
            <IconTextInput
              leftFlex={4}
              editable={true}
              rightFlex={6}
              iconStyle={true}
              title={this.store.text.tenantPhone}
              content={this.contractData.tenantPhone}
              icon="edit"
              type="input"
              keyboardType={'numeric'}
              onChangeText={text => (this.contractData.tenantPhone = text)}
            />
            <IconTextInput
              leftFlex={4}
              editable={true}
              rightFlex={6}
              iconStyle={true}
              title={this.store.text.ownerId}
              content={this.contractData.ownerId}
              icon="edit"
              type="input"
              keyboardType={'default'}
              onChangeText={text => (this.contractData.ownerId = text)}
            />
            <IconTextInput
              leftFlex={4}
              editable={true}
              rightFlex={6}
              iconStyle={true}
              title={this.store.text.tenantId}
              content={this.contractData.tenantId}
              icon="edit"
              type="input"
              keyboardType={'default'}
              onChangeText={text => (this.contractData.tenantId = text)}
            />
            <IconTextInput
              leftFlex={4}
              editable={true}
              rightFlex={6}
              iconStyle={true}
              title={this.store.text.ownerContactAddress}
              content={this.contractData.ownerContactAddress}
              icon="edit"
              type="input"
              keyboardType={'default'}
              onChangeText={text =>
                (this.contractData.ownerContactAddress = text)
              }
            />
            <IconTextInput
              leftFlex={4}
              editable={true}
              rightFlex={6}
              iconStyle={true}
              title={this.store.text.tenantContactAddress}
              content={this.contractData.tenantContactAddress}
              icon="edit"
              type="input"
              keyboardType={'default'}
              onChangeText={text =>
                (this.contractData.tenantContactAddress = text)
              }
            />
            <IconTextInput
              leftFlex={4}
              editable={true}
              rightFlex={6}
              iconStyle={true}
              title={this.store.text.address}
              content={this.contractData.apartmentAddress}
              icon="edit"
              type="input"
              keyboardType={'default'}
              onChangeText={text => (this.contractData.apartmentAddress = text)}
            />

            <IconTextInput
              leftFlex={0.5}
              rightFlex={0.5}
              title={this.store.text.dateOfContract}
              content={this.dateStringHandler(
                this.contractData.signContractDate,
              )}
              iconStyle={false}
              icon="calendar-alt"
              type="button"
              onPress={() => {
                this.inputAction(1);
                this.whichDatePicker = 0;
              }}
            />
            <IconTextInput
              leftFlex={0.5}
              rightFlex={0.5}
              title={this.store.text.contractExpiryDate}
              content={this.dateStringHandler(
                this.contractData.endContractDate,
              )}
              iconStyle={false}
              type="button"
              icon="calendar-alt"
              onPress={() => {
                this.inputAction(1);
                this.whichDatePicker = 1;
              }}
            />
            <IconTextInput
              leftFlex={0.5}
              editable={true}
              rightFlex={0.5}
              title={this.store.text.rent}
              content={this.contractData.rent}
              iconStyle={true}
              icon="edit"
              type="input"
              keyboardType={'numeric'}
              onChangeText={text => (this.contractData.rent = text)}
            />
            <IconTextInput
              leftFlex={0.5}
              editable={true}
              rightFlex={0.5}
              title={this.store.text.rates}
              content={this.contractData.rates}
              iconStyle={true}
              icon="edit"
              type="input"
              keyboardType={'numeric'}
              onChangeText={text => (this.contractData.rates = text)}
            />
            <IconTextInput
              leftFlex={0.5}
              editable={true}
              rightFlex={0.5}
              title={this.store.text.managementFee}
              content={this.contractData.managementFee}
              iconStyle={true}
              icon="edit"
              type="input"
              keyboardType={'numeric'}
              onChangeText={text => (this.contractData.managementFee = text)}
            />
            <IconTextInput
              leftFlex={0.5}
              editable={true}
              rightFlex={0.5}
              title={this.store.text.deposit}
              content={this.contractData.deposit}
              iconStyle={true}
              icon="edit"
              type="input"
              keyboardType={'numeric'}
              onChangeText={text => (this.contractData.deposit = text)}
            />
          </View>
          <Text
            style={{
              color: colors.textColor,
              fontFamily: Fonts.ubuntu,
              fontSize: 17,
              marginTop: 20,
              marginLeft: 20,
            }}>
            {this.store.text.remark}
          </Text>

          {this.renderRemark()}
          <View style={{width: width, alignItems: 'center'}}>
            <Icon
              name={'plus-circle'}
              style={{padding: 10}}
              color={colors.mainColor}
              size={40}
              onPress={() => {
                this.contractData.remark.push('');
              }}
            />
          </View>

          <DateTimePicker
            mode={'date'}
            isVisible={this.DatePickervisable}
            onConfirm={this.handleDatePicked}
            isDarkModeEnabled={this.drakMode}
            onCancel={() => {
              this.DatePickervisable = false;
            }}
          />

          <View style={{width: width, alignItems: 'center'}}>
            <TouchableOpacity
              onPress={() => {
                history.push(this, '/lease', {
                  contractData: this.contractData,
                  showSign: 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>
        </KeyboardAwareScrollView>

        <Modal
          visible={this.dialogInputVisable}
          width={0.9}
          height={0.2}
          onTouchOutside={() => {
            this.dialogInputVisable = false;
          }}
          swipeDirection={['up', 'down']} // can be string or an array
          swipeThreshold={200} // default 100
          onSwipeOut={event => {
            this.dialogInputVisable = false;
          }}>
          <ModalContent>
            <View>
              <CommonTextInput
                placeholder={this.whichInputTextReturn(true)}
                value={this.whichInputTextReturn(false)}
                onChangeText={value => this.whichDataToBeChange(value)}
              />
            </View>
          </ModalContent>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.flatten({
  button: {
    marginTop: 20,
    width: width,
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.statusBarColor,
  },
  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
  },
});
