"use client"

import {IFormData} from "@fanam-pkg/core-utils"
import {useEffect, useMemo, useRef, useState} from "react"
import {assets} from "../../assets"
import {Checkbox, ImageView} from "../../atoms"
import {DropDownSearchProps} from "../../props"
import styles from "./styles.module.sass"

export const MultiSelect = ({
  options = [],
  onChangeData,
  name,
  label,
  error,
  disabled,
  wrapperClass,
}: DropDownSearchProps) => {
  const [isOpen, setIsOpen] = useState(false)
  const [items, setItems] = useState<IFormData[]>([])

  const dropdownRef = useRef<any>(null)

  const onChange = (selOptions: IFormData[]) => onChangeData(name ? {[name]: selOptions} : selOptions)

  const toggleDropdown = (event: React.MouseEvent) => {
    if (disabled) {
      event.stopPropagation()
      return
    }

    setIsOpen(!isOpen)
  }

  const onRemove = () => onChange(options?.map((option: IFormData) => ({...option, isSelected: false})))

  const handleClickOutside = (event: MouseEvent) => {
    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) setIsOpen(false)
  }

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

  useEffect(() => {
    setItems([{label: "All", key: "all", isSelected: options?.every(({isSelected}) => isSelected)}, ...options])
  }, [options])

  const selectedOptions = useMemo(() => options?.filter(({isSelected}) => isSelected), [options])

  // const onRemoveItem = (item: IFormData) => {
  //   const optionArr = [...options]
  //   const removedObj = {...item, isSelected: false}
  //   if (item?.key === "all") {
  //     onChange(optionArr?.map((option: IFormData) => ({...option, isSelected: false})))
  //   } else {
  //     onChange(optionArr.map(obj => (obj.key === item?.key ? removedObj : obj)))
  //   }
  // }

  // const renderOption = (item: IFormData, index: number) => {
  //   const {label} = item
  //   return (
  //     <section key={index} className={`${styles.selected_option} ${disabled ? styles.option_disabled : ""}`}>
  //       <small>{label}</small>
  //       {!disabled && (
  //         <ImageView src={assets.ic_close} alt="close-icon" imgSize={16} onClick={onRemoveItem.bind(null, item)} />
  //       )}
  //     </section>
  //   )
  // }

  const onSelectItem = (value: IFormData) => {
    const optionArr = [...options]
    if (value?.key === "all") {
      onChange(optionArr?.map((option: IFormData) => ({...option, isSelected: true})))
    } else {
      onChange(optionArr.map(obj => (obj.key === value?.key ? value : obj)))
    }
  }

  const renderSelectItems = (option: IFormData, index: number) => (
    <section key={index} className={styles.option}>
      <Checkbox item={option} onSelectItem={onSelectItem} />
    </section>
  )

  return (
    <section>
      <section className={`${styles.custom_dropdown} ${wrapperClass}`} ref={dropdownRef} data-error={!!error}>
        <section
          className={`${styles.selected_options} flex-col ${selectedOptions?.length ? styles.select_options : ""} ${
            label ? "with-specification" : ""
          } ${disabled ? styles.select_disabled : ""}`}
          onClick={toggleDropdown}>
          <section className={`${styles.selected_wrapper} flex-sb-center`}>
            <article
              className={
                !!selectedOptions?.length && !disabled
                  ? `${styles.select_close_wrapper} ${styles.selected} flex-col`
                  : `${styles.select_close_wrapper} flex-col`
              }>
              <small className={`${styles.select_category} ${disabled ? styles.category_disabled : ""}`}>{label}</small>
            </article>
            <section className={`${styles.select_icons} flex-center`}>
              {!!selectedOptions?.length && !disabled && (
                <ImageView src={assets.ic_close} alt="close-icon" imgSize={16} onClick={onRemove} />
              )}
              <ImageView
                src={assets.ic_grey_arrow}
                alt="down-arrow"
                wrapperClass={`${styles.dropdown_arrow} ${isOpen ? "open" : ""}`}
              />
            </section>
          </section>
        </section>
        {isOpen && (
          <div className={styles.options}>
            {options?.length > 0 ? (
              items.map(renderSelectItems)
            ) : (
              <div className={`${styles.empty_container} flex-center`}>No Options Found</div>
            )}
          </div>
        )}
      </section>
      {error && <label className="error-text">{error}</label>}
    </section>
  )
}