import { Text, View } from "react-native";
import { TouchableOpacity } from "react-native";
import { AppContext, AppStyles } from "../../utils";
import { useContext } from "react";
import MyIcon from "../Icon";

export default function MyDropdown({
  disabled,
  label,
  onPress,
  selectedItemLabel,
  style,
}) {
  const appContext = useContext(AppContext);

  return (
    <TouchableOpacity
      disabled={disabled}
      onPress={() => onPress()}
      style={[style, disabled && AppStyles.disabled]}
    >
      <View
        style={[
          {
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
          },
          //IsPlatformIos() && { marginBottom: 10 },
        ]}
      >
        <View>
          <Text style={{ color: appContext.appTheme.text }}>{label}</Text>
          <Text style={{ color: appContext.appTheme.colors.primary }}>
            {selectedItemLabel}
          </Text>
        </View>

        <MyIcon
          name="chevron-down"
          size={24}
          color={appContext.appTheme.icon}
        />
      </View>
    </TouchableOpacity>
  );
}
