import { Dropdown } from 'react-native-element-dropdown';
import { tw } from '../../core/tailwind';
import { StyleProp, TextStyle } from 'react-native';

export interface SelectOption {
  label: string;
  value: string;
}

interface SelectProps {
  options: SelectOption[];
  defaultOption?: SelectOption;
  onSelect: (item: any) => void;
  selectControlStyle?: any;
  selectedTextStyle?: any;
  disabled?: boolean;
  dropdownPosition?: 'auto' | 'top' | 'bottom';
  placeholder?: string;
  placeholderStyle?: StyleProp<TextStyle>;
}

export function Select({
  options,
  onSelect,
  defaultOption,
  selectControlStyle,
  selectedTextStyle,
  disabled = false,
  dropdownPosition = 'auto',
  placeholder,
  placeholderStyle,
}: SelectProps) {
  return (
    <Dropdown
      data={options}
      value={defaultOption}
      onChange={onSelect}
      style={[tw`border-[#C6C6C6] border bg-[#F1F1F1] px-2 py-1 bg-light rounded-s mb-5`, selectControlStyle]}
      selectedTextStyle={[tw`text-[#424040] text-sm`, selectedTextStyle]}
      containerStyle={tw`border-[#C6C6C6] border`}
      itemTextStyle={tw`text-sm text-black`}
      labelField="label"
      valueField="value"
      placeholder={placeholder}
      placeholderStyle={[tw`text-[#999797]`, placeholderStyle]}
      disable={disabled}
      dropdownPosition={dropdownPosition}
    />
  );
}