import React, {useState} from 'react';
import {View, TextInput, StyleSheet, Dimensions, Text} from 'react-native';
import {Colors, FONTS} from 'global-styles';
import {RFValue} from 'react-native-responsive-fontsize';
import {Icon} from 'components';
import DropDownPicker from 'react-native-dropdown-picker';
const {width} = Dimensions.get('window');

const _Select = props => {
  const {
    label,
    editable,
    note,
    error,
    placeholder,
    required,
    data,
    value,
    onChangeValue,
    searchable,
  } = props;
  const [open, setOpen] = useState(false);
  const [items, setItems] = useState(data);
  return (
    <View style={styles.container(open)}>
      {label && (
        <Text style={styles.label}>
          {label} {required && <Text style={{color: Colors.RED}}>*</Text>}
        </Text>
      )}
      <View style={styles.inputSection(editable)}>
        <DropDownPicker
          open={open}
          value={value}
          items={items}
          disabled={!editable}
          setOpen={setOpen}
          setValue={onChangeValue}
          setItems={setItems}
          searchable={searchable}
          placeholder={placeholder}
          listMode="SCROLLVIEW"
          scrollViewProps={{
            nestedScrollEnabled: true,
          }}
          searchContainerStyle={{
            borderBottomColor: Colors.LINE_STROKE,
          }}
          searchTextInputStyle={{
            borderColor: Colors.LINE_STROKE,
            fontSize: RFValue(12),
          }}
          style={styles.dropdown}
          placeholderStyle={styles.dropdownPlaceholder}
          dropDownContainerStyle={styles.dropdownContent}
          textStyle={styles.dropdownText}
        />
      </View>
      {note && <Text style={styles.note}>{note}</Text>}
      {error && (
        <View style={styles.errorSection}>
          <Icon name="error" type="MaterialIcons" style={styles.errorIcon} />
          <Text style={styles.errorText}>{error}</Text>
        </View>
      )}
    </View>
  );
};

_Select.defaultProps = {
  editable: true,
  note: undefined,
  error: undefined,
  required: false,
  placeholder: '',
  data: [],
  value: '',
  onChangeValue: () => {},
  searchable: false,
};

const styles = StyleSheet.create({
  container: isOpen => ({
    zIndex: isOpen ? 10 : 1,
  }),
  label: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(11.5),
    color: Colors.TEXT,
  },
  inputSection: editable => ({
    flexDirection: 'row',
    alignItems: 'center',
    height: width * 0.12,
    borderWidth: 1,
    borderColor: Colors.LINE_STROKE,
    borderRadius: width * 0.02,
    marginVertical: width * 0.023,
    backgroundColor: editable ? Colors.WHITE : Colors.DISABLED,
  }),
  dropdown: {
    height: width * 0.12,
    borderWidth: 1,
    borderColor: Colors.LINE_STROKE,
    borderRadius: width * 0.02,
    paddingHorizontal: width * 0.04,
  },
  dropdownPlaceholder: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(12),
    color: Colors.GREY,
  },
  dropdownContent: {
    borderWidth: 1,
    borderColor: Colors.LINE_STROKE,
    backgroundColor: Colors.WHITE,
  },
  dropdownText: {
    fontFamily: FONTS.poppins[500],
    fontSize: RFValue(13),
    color: Colors.TEXT,
  },
  note: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(10),
    color: Colors.TEXT_LIGHT,
    marginTop: -width * 0.005,
  },
  errorSection: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: width * 0.002,
  },
  errorIcon: {
    color: Colors.RED,
  },
  errorText: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(10),
    color: Colors.RED,
    marginTop: -width * 0.001,
    marginLeft: width * 0.01,
  },
  numberIdSection: {
    height: width * 0.11,
    backgroundColor: Colors.DISABLED,
    borderRightWidth: 1,
    borderColor: Colors.LINE_STROKE,
    borderTopLeftRadius: width * 0.02,
    borderBottomLeftRadius: width * 0.02,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: width * 0.02,
  },
  numberIdText: {},
});

export default _Select;
