import React, { useEffect, useState, useRef } from "react";
//icons
import ArrowLight from "../../assets/icons/arrowLight.svg";
import ArrowDark from "../../assets/icons/arrowDark.svg";
import IconFiltersLight from "../../assets/icons/filter/IconFiltersLight.svg";
import IconFiltersDark from "../../assets/icons/filter/IconFiltersDark.svg";
import RadioButton from "../../assets/icons/filter/radiobutton.svg";
import RadioButtonActiveLight from "../../assets/icons/filter/radiobuttonActiveLight.svg";
import RadioButtonActiveDark from "../../assets/icons/filter/radiobuttonActiveDark.svg";

import styles from "./Filter.module.scss";

import Image from "next/image";

type FilterT = {
  id: string;
  handleSelect: (e: any) => void;
  theme?: "light" | "dark";
  placeholder?: string;
  options: Array<{ label: string; value: string }>;
  devalultValues?: Array<string>;
  errorText?: string;
  selectedOptions: any;
  setSelectedOptions: (e: any) => void;
};

const Filter = (props: FilterT) => {
  const {
    id,
    handleSelect,
    theme = "light",
    placeholder = "Choose the option",
    options,
    devalultValues = [],
    errorText,
    selectedOptions,
    setSelectedOptions,
  } = props;

  const ref = useRef(null);

  const [isOpen, setIsOpen] = useState<boolean>(false);
  // const [selectedOptions, setSelectedOptions] = useState({});

  const handleClickOutside = (event: { target: any; }) => {
    //@ts-ignore
    if (ref.current && !ref.current.contains(event.target)) {
      setIsOpen(false);
    }
  };

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  // useEffect(() => {
  //   if (devalultValues) {
  //     let defaultSelectedOptions = {};
  //     devalultValues?.map((val, index) => {
  //       defaultSelectedOptions = {
  //         ...defaultSelectedOptions,
  //         [val]: true,
  //       };
  //     });
  //     setSelectedOptions(defaultSelectedOptions);
  //   }
  // }, []);

  const handleClick = () => {
    setIsOpen((open) => !open);
  };

  const onOptionClick = (value: string) => {
    let result = {};

    //@ts-ignore
    if (selectedOptions[`${value}`]) {
      result = { ...selectedOptions, [value]: false };
    } else {
      result = { ...selectedOptions, [value]: true };
    }
    console.log("result", result);

    setSelectedOptions(result);
    let selectedOptionsToRender = Object.keys(result).filter(
      //@ts-ignore
      (key) => result[key] === true
    );
    handleSelect(selectedOptionsToRender);
  };

  const renderOption = (option: { label: string; value: string }) => {
    const isOptionSelected = Object.keys(selectedOptions).find((key) => {
      //@ts-ignore
      return key === `${option.value}` && selectedOptions[key] === true;
    });

    return (
      <div key={option.value} onClick={() => onOptionClick(option.value)}>
        <Image
          src={
            !isOptionSelected
              ? RadioButton
              : theme === "dark"
              ? RadioButtonActiveDark
              : RadioButtonActiveLight
          }
          alt="radio"
        />
        <label>{option.label}</label>
      </div>
    );
  };

  return (
    <div
      className={
        theme === "light"
          ? styles.light_filter_wrapper
          : styles.dark_filter_wrapper
      }
      ref={ref}
    >
      <div
        className={
          theme === "light"
            ? !errorText
              ? styles.light_filter
              : `${styles.light_filter} ${styles.error_filter}`
            : !errorText
            ? styles.dark_filter
            : `${styles.dark_filter} ${styles.error_filter}`
        }
        onClick={handleClick}
        data-id={id}
      >
        <Image
          alt="filter-icon"
          src={theme === "light" ? IconFiltersLight : IconFiltersDark}
          className={styles.filter_logo}
        />
        <p className={styles.filter_label}>{placeholder}</p>
        <Image
          className={
            isOpen
              ? `${styles.open_filter_icon} ${styles.filter_icon}`
              : `${styles.close_filter_icon} ${styles.filter_icon}`
          }
          src={theme === "light" ? ArrowLight : ArrowDark}
          alt="arrow-icon"
        />
      </div>
      {errorText ? <p className={styles.error_text}>{errorText}</p> : null}
      {isOpen && (
        <form className={styles.filter_modal}>
          {options?.map((option) => {
            return renderOption(option);
          })}
        </form>
      )}
    </div>
  );
};

export default Filter;