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

const MultipleSelection: React.FC<PickerProps> = ({
  show,
  type,
  enableSearch = true,
  isCapsTitle = false,
  searchPlaceholder = "Search here",
  searchPlaceholderTextColor,
  pickerTitle,
  emptyTitle = "No Record(s) Found",
  data,
  value,
  rowTitleKey,
  rowUniqueKey,
  extraTitleSymbol = "",
  extraTitleKey = "",
  onDone,
  onClose,
  pickerColor,
}) => {
  const [selectedData, setSelectedData] = useState<any>([]);
  const [searchData, setSearchData] = useState([]);
  const [searchText, setSearchText] = useState<string>("");
  const [allSelected, setAllSelected] = useState<boolean>(false);
  const listRef = React.useRef(null);
  useEffect(() => {
    if (value !== "" && show && type === "single") {
      setSelectedData(value);
      const index = data?.findIndex(
        (item) => item[rowUniqueKey] == value[rowUniqueKey]
      );
      if (show && index > -1) {
        listRef.current?.scrollToIndex({
          index: index,
          animated: true,
          viewPosition: 0.5,
        });
      }
    } else if (
      value !== "" &&
      show &&
      type === "multiple" &&
      value?.length > 0
    ) {
      setSelectedData(
        data?.filter((e) =>
          value?.some((item) => item[rowUniqueKey] === e[rowUniqueKey])
        )
      );
    }
    if (selectedData?.length === data?.length) {
      setAllSelected(true);
    } else {
      setAllSelected(false);
    }
    return () => {
      setSearchText("");
      setSearchData([]);
    };
  }, [show, value]);

  useEffect(() => {
    if (selectedData?.length === data?.length) {
      setAllSelected(true);
    } else {
      setAllSelected(false);
    }
  }, [selectedData]);

  return React.useMemo(() => {
    const onChangeText = (txt: string) => {
      setSearchData(
        data.filter((item) => {
          const mainTitle = item[rowTitleKey]?.toString().toLowerCase() || "";
          const extraTitle = extraTitleKey
            ? item[extraTitleKey]?.toString().toLowerCase() || ""
            : "";
          const searchText = txt.toLowerCase();

          return (
            mainTitle.includes(searchText) || extraTitle.includes(searchText)
          );

          if (extraTitleKey) {
            return (
              item[rowTitleKey]
                ?.toString()
                ?.toLowerCase()
                ?.includes(txt?.toLowerCase()) ||
              item[extraTitleKey]
                ?.toString()
                ?.toLowerCase()
                ?.includes(txt?.toLowerCase())
            );
          } else {
            return item[rowTitleKey]
              ?.toString()
              ?.toLowerCase()
              ?.includes(txt?.toLowerCase());
          }
        })
      );
      setSearchText(txt);
    };
    const onDonePress = () => {
      if (selectedData?.length <= 0) {
        setSelectedData([]);

        onClosed();
      } else {
        onDone(selectedData);
        setSelectedData([]);
      }
    };

    const onClosed = () => {
      setSelectedData([]);
      onClose();
    };
    const onSelectAllPress = () => {
      if (!allSelected) {
        setSelectedData([...data]);
        setAllSelected(true);
      } else {
        setSelectedData([]);
        setAllSelected(false);
      }
    };
    const onItemPress = (item: any, isAdded: boolean) => {
      let allData = [...selectedData];
      if (type === "single") {
        setSelectedData([item]);
      } else {
        if (isAdded) {
          allData = allData.filter(
            (el) => el[rowUniqueKey] !== item[rowUniqueKey]
          );
        } else {
          allData.push(item);
        }
        setSelectedData(allData);

        if (allData?.length === data?.length) {
          setAllSelected(true);
        } else {
          setAllSelected(false);
        }
      }
    };

    const showListData = searchText === "" ? data : searchData;
    return (
      <Modal
        visible={show}
        animationType={"slide"}
        transparent={true}
        onRequestClose={onClose}
      >
        <SafeAreaView style={styles.safearea}>
          <View style={styles.container}>
            <View style={styles.innerContainer}>
              <View style={styles.buttonsRow}>
                <Buttons
                  title={"Cancel"}
                  onPress={onClosed}
                  type={"close"}
                  pickerColor={pickerColor}
                />
                <Text
                  style={[
                    styles.pickerTitleText,
                    pickerColor && { color: pickerColor },
                  ]}
                >
                  {pickerTitle}
                </Text>
                <Buttons
                  title={"Done"}
                  onPress={onDonePress}
                  type={"done"}
                  pickerColor={pickerColor}
                />
              </View>
              <View style={styles.devider} />
              {enableSearch && (
                <SearchBar
                  value={searchText}
                  placeholder={searchPlaceholder}
                  searchPlaceholderTextColor={searchPlaceholderTextColor}
                  onChangeText={onChangeText}
                  onClear={() => setSearchText("")}
                />
              )}

              <View>
                {type === "multiple" && showListData?.length > 0 && (
                  <>
                    <CheckBox
                      onPress={onSelectAllPress}
                      isChecked={allSelected}
                      title={"Select All"}
                      pickerColor={pickerColor}
                    />

                    <View style={styles.devider} />
                  </>
                )}
              </View>
              <View style={styles.listView}>
                <FlatList
                  ref={listRef}
                  data={showListData}
                  // style={{flex: 1}}
                  contentContainerStyle={{ paddingBottom: 100 }}
                  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]}>
                        <CheckBox
                          onPress={() => onItemPress(item, active)}
                          isChecked={active}
                          pickerColor={pickerColor}
                          isCapsTitle={isCapsTitle}
                          title={`${item[rowTitleKey]}${
                            extraTitleSymbol && extraTitleSymbol
                          }${extraTitleKey && item[extraTitleKey]}`}
                        />
                        <View style={styles.devider} />
                      </React.Fragment>
                    );
                  }}
                  // snapToInterval={SIZE.S_54}
                  decelerationRate="normal"
                  viewabilityConfig={{
                    itemVisiblePercentThreshold: 50, // Adjust as needed
                  }}
                  onScrollToIndexFailed={(info) => {
                    if (type === "single") {
                      const wait = new Promise((resolve) =>
                        setTimeout(resolve, 500)
                      );
                      wait.then(() => {
                        listRef.current?.scrollToIndex({
                          index: info.index,
                          animated: true,
                          viewPosition: 0.5,
                        });
                      });
                    }
                  }}
                  keyExtractor={(item) => item[rowUniqueKey]}
                />
              </View>
            </View>
          </View>
        </SafeAreaView>
        <SafeAreaView style={styles.bottomSafearea} />
      </Modal>
    );
  }, [
    show,
    data,
    type,
    pickerTitle,
    rowUniqueKey,
    rowTitleKey,
    extraTitleKey,
    extraTitleSymbol,
    onClose,
    onDone,
    searchText,
    searchData,
    selectedData,
    allSelected,
  ]);
};

const styles = StyleSheet.create({
  emptyView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 110,
  },
  emptyTitleText: {
    fontSize: 20,
    fontWeight: "500",
    textAlign: "center",
    color: COLORS.TITLE,
  },

  listView: { marginBottom: 110 },
  devider: {
    height: 1,
    backgroundColor: COLORS.DEVIDER,
  },
  buttonsRow: {
    flexDirection: "row",
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: COLORS.WHITE,
  },
  pickerTitleText: {
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
    color: COLORS.PRIMARY,
    flex: 1,
  },
  safearea: {
    flex: 1,
  },
  bottomSafearea: {
    backgroundColor: COLORS.WHITE,
    flex: 0,
  },
  container: {
    flex: 1,
    backgroundColor: COLORS.RGBA,
    justifyContent: "flex-end",
  },
  innerContainer: {
    backgroundColor: COLORS.WHITE,
    paddingVertical: 15,
    paddingHorizontal: 5,
    maxHeight: "80%",
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
  },
});

export default MultipleSelection;