import DownArrow from "../../assets/ReactSVG/DownArrow";
import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
} from "react-native";
import { Props } from "./SingleSelectDropDown.types";

const SingleSelectDropDown = ({ options, selectedValue, onValueChange }: Props) => {
  const [selectedOption, setSelectedOption] = useState<string>();
  const [expanded, setExpanded] = useState(false);

  const toggleDropdown = () => {
    setExpanded(!expanded);
  };

  const handleOptionSelect = (item) => {
    onValueChange(item);
    setSelectedOption(item);
    setExpanded(false);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.dropdownButton} onPress={toggleDropdown}>
  <Text style={[styles.selectedValueText,{color: selectedOption ? "black" : "#8E8E8E" }]}>
    {selectedOption ? selectedOption : selectedValue}
  </Text>
  <DownArrow fill="#8E8E8E" />
</TouchableOpacity>
      {expanded && (
        <ScrollView nestedScrollEnabled={true} style={styles.optionsContainer}>
          {options.map((item, index) => (
            <TouchableOpacity
              key={index}
              style={styles.optionItem}
              onPress={() => handleOptionSelect(item)}
            >
              <Text style={styles.optionText}>{item}</Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginVertical: 10,
  },
  selectedValueTextSelected: {
    color: 'black', // Change the color after selection
  },
  dropdownButton: {
    padding: 8,
    borderColor: "#ECECEC",
    borderWidth: 1,
    borderRadius: 10,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  selectedValueText: {
    fontSize: 14,
  
  },
  optionsContainer: {
    marginTop: 10,
    borderColor: "#ECECEC",
    borderWidth: 1,
    borderRadius: 10,
    height: 120,
  },
  optionItem: {
    padding: 10,
    borderBottomColor: "#ECECEC",
    borderBottomWidth: 1,
  },
  optionText: {
    fontSize: 14,
  },
});

export default SingleSelectDropDown;