import React from "react";
import { Appearance } from "react-native";
import Svg, { Path } from "react-native-svg";
import SelectDropdown from "react-native-select-dropdown";

//styles
import fontSize from "../constants/fontSize";
import Colors from "../constants/Colors";
function Select({
  iconPosition,
  options,
  onChange,
  name,
  value,
  width,
  defaultValue,
}) {
  const colorScheme = Appearance.getColorScheme();

  return (
    <SelectDropdown
      data={options}
      buttonStyle={{
        width: width,
        borderWidth: 1,
        borderColor: Colors.theme1[colorScheme].gray2077 + "66",
        borderRadius: 6,
        height: 36,
        backgroundColor: Colors.theme1[colorScheme].grayF9,
        fontFamily: "regular",
      }}
      rowTextStyle={{
        fontSize: fontSize.sm,
        fontFamily: "regular",
      }}
      defaultButtonText={defaultValue}
      statusBarTranslucent={true}
      buttonTextStyle={{
        textAlign: "center",
        justifyContent: "flex-end",
        flex: 0,
        fontSize: fontSize.sm,
        color: Colors.theme1[colorScheme].gray2077,
        fontFamily: "regular",
        // display: 'inline'
      }}
      dropdownIconPosition={iconPosition}
      onSelect={(selectedItem) => {
        onChange(name, selectedItem);
      }}
      renderDropdownIcon={() => (
        <Svg
          data-name="vuesax/linear/arrow-down"
          xmlns="http://www.w3.org/2000/svg"
          width={16.081}
          height={16.081}
        >
          <Path
            d="m13.347 5.997-4.368 4.369a1.331 1.331 0 0 1-1.876 0L2.734 5.997"
            fill="none"
            stroke={Colors.theme1[colorScheme].gray2077 + "66"}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
          />
        </Svg>
      )}
    />
  );
}

export default Select;

Select.defaultProps = {
  options: ["1", "2", "3"],
  iconPosition: "left",
};