/*
 @ 𝔸𝕦𝕥𝕙𝕠𝕣: ℙ𝕒𝕟𝕜𝕒𝕛 𝕂𝕦𝕞𝕒𝕣 ℙ𝕣𝕒𝕛𝕒𝕡𝕒𝕥𝕚
 @ 𝔽𝕚𝕝𝕖 ℕ𝕒𝕞𝕖: index.tsx
 @ ℂ𝕠𝕡𝕪𝕣𝕚𝕘𝕙𝕥 (𝕔) 2026 𝕊𝕠𝕝𝕦𝕥𝕚𝕠𝕟𝕋𝕖𝕔𝕙𝕊𝕖𝕣𝕚𝕖𝕤
 @ ℂ𝕣𝕖𝕒𝕥𝕖𝕕 𝕆𝕟: Sun Jan 04 2026
 */

import React, { useEffect, useState } from "react";
import {
  FlatList,
  Image,
  Modal,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import SearchBar from "./components/search-bar";
import { IMAGES } from "./assets";
import Buttons from "./components/button";
import { PickerProps } from "./utils/props-type";
import { COLORS } from "./utils/values";

const MultipleSelection: React.FC<PickerProps> = ({
  show,
  type,
  enableSearch = true,
  searchPlaceholder = "Search here",
  pickerTitle,
  emptyTitle = "No Record(s) Found",
  data,
  value,
  rowTitleKey,
  rowUniqueKey,
  extraTitleSymbol,
  extraTitleKey,
  onDone,
  onClose,
}) => {
  const [selectedData, setSelectedData] = useState<any>([]);
  const [searchData, setSearchData] = useState([]);
  const [searchText, setSearchText] = useState<string>("");

  useEffect(() => {
    if (value !== "" && show && type === "single") {
      setSelectedData([value]);
    } else if (
      value !== "" &&
      show &&
      type === "multiple" &&
      value?.length > 0
    ) {
      setSelectedData(
        data?.filter((e) =>
          value?.some((item) => item[rowUniqueKey] === e[rowUniqueKey])
        )
      );
    }
  }, [show, value]);

  return React.useMemo(() => {
    const onChangeText = (txt: string) => {
      setSearchData(
        data.filter((item) => {
          if (extraTitleKey) {
            return (
              item[rowTitleKey]?.toLowerCase()?.includes(txt?.toLowerCase()) ||
              item[extraTitleSymbol]
                ?.toLowerCase()
                ?.includes(txt?.toLowerCase())
            );
          } else {
            return item[rowTitleKey]
              ?.toLowerCase()
              ?.includes(txt?.toLowerCase());
          }
        })
      );
      setSearchText(txt);
    };
    const onDonePress = () => {
      onDone(selectedData.length === 1 ? selectedData[0] : selectedData);
      setSelectedData([]);
    };
    const onItemPress = (item: any, isAdded: boolean) => {
      let d = [...selectedData];
      if (type === "single") {
        setSelectedData([item]);
      } else {
        if (isAdded) {
          d = d.filter((el) => el[rowUniqueKey] !== item[rowUniqueKey]);
        } else {
          d.push(item);
        }
        setSelectedData(d);
      }
    };
    return (
      <Modal
        visible={show}
        animationType={"slide"}
        transparent={true}
        onRequestClose={onClose}
      >
        <SafeAreaView style={styles.safearea}>
          <View style={styles.container}>
            <View style={styles.innerContainer}>
              <Text style={styles.pickerTitleText}>{pickerTitle}</Text>
              {enableSearch && (
                <SearchBar
                  value={searchText}
                  placeholder={searchPlaceholder}
                  onChangeText={onChangeText}
                  onClear={() => setSearchText("")}
                />
              )}
              <View style={styles.devider} />
              <View style={styles.listView}>
                <FlatList
                  data={searchText === "" ? data : searchData}
                  ListEmptyComponent={() => {
                    return (
                      <View style={styles.emptyView}>
                        <Text style={styles.emptyTitleText}>{emptyTitle}</Text>
                      </View>
                    );
                  }}
                  renderItem={({ item }) => {
                    const active = selectedData?.some(
                      (e) => e[rowUniqueKey] === item[rowUniqueKey]
                    );
                    return (
                      <React.Fragment key={item[rowUniqueKey]}>
                        <TouchableOpacity
                          activeOpacity={0.65}
                          onPress={() => onItemPress(item, active)}
                          style={styles.rowView}
                        >
                          <Image
                            source={active ? IMAGES.CHECK : IMAGES.UNCHECK}
                            style={[
                              styles.check,
                              {
                                tintColor: active
                                  ? COLORS.PRIMARY
                                  : COLORS.TITLE,
                              },
                            ]}
                          />
                          <Text style={styles.rowTitleText}>
                            {item[rowTitleKey]}
                            {extraTitleSymbol && extraTitleSymbol}
                            {extraTitleKey && item[extraTitleKey]}
                          </Text>
                        </TouchableOpacity>

                        <View style={styles.devider} />
                      </React.Fragment>
                    );
                  }}
                  keyExtractor={(item) => item[rowUniqueKey]}
                />
              </View>
            </View>
          </View>

          <View style={styles.devider} />

          <View style={styles.buttonsRow}>
            <Buttons title={"Cancel"} onPress={onClose} type={"cancel"} />
            <Buttons title={"Done"} onPress={onDonePress} type={"done"} />
          </View>
        </SafeAreaView>
        <SafeAreaView style={styles.bottomSafearea} />
      </Modal>
    );
  }, [
    show,
    data,
    type,
    pickerTitle,
    rowUniqueKey,
    rowTitleKey,
    extraTitleKey,
    extraTitleSymbol,
    onClose,
    onDone,
    searchText,
    searchData,
    selectedData,
  ]);
};

const styles = StyleSheet.create({
  emptyView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 110,
  },
  emptyTitleText: {
    fontSize: 20,
    fontWeight: "500",
    textAlign: "center",
    color: COLORS.TITLE,
  },
  rowTitleText: {
    fontWeight: "400",
    fontSize: 17,
    color: COLORS.TITLE,
    marginLeft: 15,
  },
  check: {
    height: 22,
    width: 22,
  },
  listView: { marginBottom: 110 },
  rowView: {
    flexDirection: "row",
    alignItems: "center",
    marginHorizontal: 10,
    marginVertical: 5,
    paddingVertical: 15,
  },
  devider: {
    height: 1,
    backgroundColor: "#d2d2d2",
  },
  buttonsRow: {
    flexDirection: "row",
    padding: 15,
    justifyContent: "space-between",
    backgroundColor: "white",
  },
  pickerTitleText: {
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
    color: COLORS.PRIMARY,
    marginBottom: 15,
  },
  safearea: {
    backgroundColor: "white",
    flex: 1,
  },
  bottomSafearea: {
    backgroundColor: "white",
    flex: 0,
  },
  container: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.65)",
    justifyContent: "flex-end",
  },
  innerContainer: {
    backgroundColor: "white",
    paddingVertical: 15,
    paddingHorizontal: 5,
    maxHeight: "80%",
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
  },
});

export default MultipleSelection;