import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
import { Props } from "./Multiselect.types";

const Multiselect = ({ option, onSelect, selectItem, styleConfig }: Props) => {
  const [selectedItems, setSelectedItems] = useState<(string | number)[]>(
    selectItem || []
  );

  useEffect(() => {
    setSelectedItems(selectItem || []);
  }, [selectItem]);

  const toggleSelection = (color: string | number) => {
    let array: (string | number)[] = [];
    if (selectedItems.includes(color)) {
      array = selectedItems.filter((item) => item !== color);
    } else {
      array = [...selectedItems, color];
    }

    setSelectedItems(array);
    onSelect(array);
  };

  return (
    <View style={[styles.mainView]}>
      {option.map((item, index) => (
        <TouchableOpacity
          key={index}
          onPress={() => toggleSelection(item)}
          style={[
            {
              borderRadius: 24,
              paddingHorizontal: 12,
              paddingVertical: 4,
              borderWidth: 1,
              backgroundColor: selectedItems.includes(item)
                ? styleConfig?.selectedStyle?.backgroundColor || "#0065FF"
                : "white",
              borderColor: selectedItems.includes(item)
                ? styleConfig?.selectedStyle?.borderColor || "#0065FF"
                : "#AFAFAF",
            },
          ]}
        >
          <Text
            style={[
              {
                fontSize: 12,
                textAlign: "center",
                color: selectedItems.includes(item)
                  ? styleConfig?.style?.color || "white"
                  : "#AFAFAF",
              },
            ]}
          >
            {item}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

export default Multiselect;

const styles = StyleSheet.create({
  mainView: { flexDirection: "row", gap: 8, flexWrap: "wrap" },
});