"use client";
import React, { useEffect, useState, type ReactElement } from 'react'
import * as AccordionPrimitive from '@radix-ui/react-accordion'
import { ChevronDownIcon } from '@radix-ui/react-icons'
import { type ITab, type ITabProps } from '@/Components/Tabs/Types'
import { defaultTabs } from '@/Components/Tabs/Tabs'
import { makeClassName } from '@/utils'

const DEFAULT_TAB_NAV_CLASSNAME = 'group flex h-[45px] flex-1 cursor-default items-center justify-between bg-slate-100 px-5 text-[15px] leading-none text-violet11 shadow-[0_1px_0] shadow-mauve6 outline-none hover:bg-mauve2'

const DEFAULT_CONTENT_CLASSNAME = 'bg-white data-[state=closed]:animate-slideUpCollapsible data-[state=open]:animate-slideDownCollapsible'

const makeAccordionSection = (tab: ITab, props: {
  tabNavClassName?: string
  defaultTabNavClassName?: string
  defaultContentClassName?: string
  activeTab?: string
}): ReactElement => {
  return (
    <AccordionPrimitive.Item
      key={tab.id}
      value={tab.id}
    >
      <AccordionPrimitive.Header className="flex w-full bg-rose-200">
        <AccordionPrimitive.Trigger
          className={makeClassName({
            className: props.tabNavClassName,
            defaultClassName: props.defaultTabNavClassName
          })}

        ><span>{tab.label}</span>
          <ChevronDownIcon className="flex-none transition-transform duration-300 ease-[cubic-bezier(0.87,0,0.13,1)] group-data-[state=open]:rotate-180" aria-hidden /></AccordionPrimitive.Trigger>
      </AccordionPrimitive.Header>
      <AccordionPrimitive.Content
        className={makeClassName({
          className: tab.className,
          defaultClassName: props.defaultContentClassName
        })}
      >
        <div className='px-5 py-[15px]'>
          {tab.content !== undefined ? tab.content : tab.children}
        </div>
      </AccordionPrimitive.Content>

    </AccordionPrimitive.Item>
  )
}

const makeAccordionSections = (tabs: ITab[], props: {
  tabNavClassName?: string
  defaultTabNavClassName?: string
  defaultContentClassName?: string
}): ReactElement[] => {
  return tabs.map(tab => {
    return makeAccordionSection(tab, props)
  })
}

export default function Accordion({
  tabs = defaultTabs,
  defaultTab,
  selectedTab,
  className,
  defaultContentClassName = DEFAULT_CONTENT_CLASSNAME,
  navClassName,
  tabNavClassName,
  defaultTabNavClassName = DEFAULT_TAB_NAV_CLASSNAME,
  onChange
}: Omit<ITabProps, 'onChange'> & { onChange?: (tab: string | undefined) => void }): ReactElement {
  const [activeTab, setActiveTab] = useState<string | undefined>()
  const onTabChange = (tab: string | undefined): void => {
    setActiveTab(tab)
    if (typeof onChange === 'function') {
      onChange(tab)
    }
  }

  useEffect(() => {
    if (selectedTab !== activeTab) {
      const newSelected = selectedTab !== undefined ? selectedTab : tabs[0].id
      setActiveTab(newSelected)
      onTabChange(newSelected)
    }
  }, [selectedTab])
  return (<AccordionPrimitive.Root
    className={className}
    type='single'
    collapsible={true}
    onValueChange={onTabChange}
    value={selectedTab}
  >
    {
      makeAccordionSections(tabs, { tabNavClassName, defaultTabNavClassName, defaultContentClassName })
    }

  </AccordionPrimitive.Root>
  )
}

export function MultiAccordion({
  tabs = defaultTabs,
  defaultTab,
  selectedTabs,
  selectAll = true,
  className,
  defaultContentClassName = DEFAULT_CONTENT_CLASSNAME,
  navClassName,
  tabNavClassName,
  defaultTabNavClassName = DEFAULT_TAB_NAV_CLASSNAME,
  onChange
}: Omit<ITabProps, 'onChange' | 'selectedTab'> & { selectedTabs?: string[], selectAll?: boolean, onChange?: (tabs: string[]) => void }): ReactElement {
  const [activeTabs, setActiveTabs] = useState<string[]>([])
  const onTabChange = (tabs: string[]): void => {
    setActiveTabs(tabs.slice())
    if (typeof onChange === 'function') {
      onChange(tabs)
    }
  }

  useEffect(() => {
    setActiveTabs(selectedTabs !== undefined ? selectedTabs : selectAll ? tabs.map(t => t.id) : [])
    return () => {
      setActiveTabs([])
    }
  }, [selectedTabs, selectAll])

  return (<AccordionPrimitive.Root
    className={className}
    type='multiple'
    defaultValue={activeTabs}
    onValueChange={onTabChange}
    value={activeTabs}
  >
    {
      makeAccordionSections(tabs, { tabNavClassName, defaultTabNavClassName, defaultContentClassName })
    }

  </AccordionPrimitive.Root>
  )
}
