import React, { FC, ReactElement, ReactNode, useState } from "react"
import { motion } from "framer-motion"
import { ChevronDownIcon } from "lucide-react"

import Stack from "../molecules/stack"
import Text from "../molecules/text"

// Types
export type AccordionItemProps = {
  title: string
  subTitle?: string
  content: string
  icon?: ReactElement
  isExpanded?: boolean
  defaultExpanded?: boolean
  onClick?: () => void
}

type AccordionGroupProps = {
  children: ReactNode
}

// AccordionItem Component
export const AccordionItem: FC<AccordionItemProps> = ({
  title,
  subTitle,
  content,
  icon,
  isExpanded,
  defaultExpanded,
  onClick,
}) => {
  const itemIcon = icon || <ChevronDownIcon className="h-5 w-5" />
  const initialExpandedState = isExpanded || defaultExpanded

  return (
    <Stack className="overflow-hidden rounded-sm bg-secondary" px={6} p={4}>
      <button className="w-full justify-between" onClick={onClick}>
        <Stack row alignCenter justifyCenter>
          <Stack className="w-full">
            <Text as="h6" className="text-start font-semibold">
              {title}
            </Text>
            {subTitle && (
              <Text as="p" muted className="mt-1 text-start text-sm">
                {subTitle}
              </Text>
            )}
          </Stack>
          {!icon ? (
            <motion.div
              animate={{ rotate: initialExpandedState ? 180 : 0 }}
              transition={{ duration: 0.3 }}
            >
              {itemIcon}
            </motion.div>
          ) : (
            itemIcon
          )}
        </Stack>
      </button>
      <motion.div
        initial={initialExpandedState ? "open" : "closed"}
        animate={initialExpandedState ? "open" : "closed"}
        variants={{
          open: { height: "auto", opacity: 1 },
          closed: { height: 0, opacity: 0 },
        }}
        transition={{ duration: 0.3, ease: "easeInOut" }}
      >
        <Stack className="pt-4 text-muted-foreground">{content}</Stack>
      </motion.div>
    </Stack>
  )
}

// AccordionGroup Component
export const AccordionGroup: FC<AccordionGroupProps> = ({ children }) => {
  const [expandIndex, setExpandIndex] = useState<number | null>(null)

  // Toggle accordion item
  const handleAccordionItemClick = (index: number) => {
    setExpandIndex((prevIndex) => (prevIndex === index ? null : index))
  }

  const accordionItems = React.Children.toArray(children)

  return (
    <div className="w-full space-y-4">
      {accordionItems.map((child, index) =>
        React.cloneElement(child as ReactElement, {
          isExpanded: expandIndex === index,
          onClick: () => handleAccordionItemClick(index),
          key: index,
        })
      )}
    </div>
  )
}