import React, { FC, Fragment, ReactElement } from "react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "../../atoms/Accordion";
import { Button } from "../../atoms";
import { ChevronDown, ChevronUp, LucideIcon } from "lucide-react";
import { twMerge } from "tailwind-merge";
import { NavLink } from "@remix-run/react";

type FilterAccordionSubItem = {
  label: string;
  to?: string
  onClick?: () => void
}

type FilterAccordionItem = {
  label: string;
  leftIcon?: any;
  to?: string,
  onClick?: () => void,
  content: any[];
}

type FilterAccordionProps = {
  items: any[],
  expandedIcon?: ReactElement<LucideIcon>,
  className?: any,
  collapsedIcon?: ReactElement<LucideIcon>,
  collapsible?: boolean
}

const FilterAccordion: FC<FilterAccordionProps> = ({
  items, className, expandedIcon = <ChevronUp size={20} color="#667085" />, collapsible = true, collapsedIcon = <ChevronDown size={20} color="#667085"/> }: FilterAccordionProps) => {
  return (
    <Accordion type="single" className={className} collapsible={collapsible}>
      {items.length >= 1 && items.map((item: FilterAccordionItem, index: number) => <AccordionItem key={`filterAccordionItem-${index}`} value={`item-${index}`}>
        <AccordionTrigger><>
        {item?.to ? <>
          <NavLink to={item?.to} className="w-full">
            {({isActive}) =>
                <div className={twMerge(`w-full text-left justify-start inline-flex items-center rounded-lg border border-transparent whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-0 transition duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-100 font-manrope text-mono-500 bg-background hover:bg-hover hover:text-hover-foreground h-10 px-3 gap-3 ${isActive ? "bg-primary-25 text-primary-700" : ""}`)}><div className="flex w-6">{item?.leftIcon}</div><div className="flex-1 font-semibold text-sm text-[#344054]">{item?.label}</div></div>
            }
          </NavLink>
        </> : <>
          <div className={twMerge(`w-full text-left justify-start inline-flex items-center rounded-lg border border-transparent whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-0 transition duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-100 font-manrope text-mono-500 bg-background hover:bg-hover hover:text-hover-foreground h-10 px-3 gap-3`)}><div className="flex w-6">{item?.leftIcon}</div><div className="flex-1 font-semibold text-sm text-[#344054]">{item?.label}</div></div>
        </>}
        {item?.content?.length >= 1 && <>
        <div className="relative h-6 w-6">
          <div
            id=""
            className="dropdown-opened animate-in fade-in-50 animate-out fade-out-50 duration-500 top-0 absolute"
          >
            <>{collapsedIcon}</>
          </div>
          <div
            id=""
            className="dropdown-closed animate-in fade-in-50 animate-out fade-out-50 duration-500 top-0 absolute"
          >
            <>{expandedIcon}</>
          </div>
        </div>
          </>}</>
        </AccordionTrigger>
        <AccordionContent>
          <div className="flex flex-col gap-1">
          {item?.content?.length >= 1 && item?.content?.map((subItem: FilterAccordionSubItem, index: number) => {
            return <Fragment key={`filterAccordionSubItem-${index}`}>
              {subItem?.to ? <NavLink to={subItem?.to}>
                {({ isActive }) => <Button size="md" onClick={subItem?.onClick} variant="nav" className={`w-full text-left justify-start ${isActive ? "bg-primary-25 text-primary-700" : "bg-none"}`} leftIcon={<div className="flex w-5 mr-2"></div>}>{subItem?.label}</Button>}</NavLink>
            : <Button size="md" onClick={subItem?.onClick} variant="nav" className="w-full text-left justify-start" leftIcon={<div className="flex w-5 mr-2"></div>}>{subItem?.label}</Button> }
            </Fragment>
          }
          )}
          </div>
        </AccordionContent>
      </AccordionItem>
      )}
    </Accordion>
  );
};

export { FilterAccordion, FilterAccordionSubItem, FilterAccordionItem, FilterAccordionProps  };
