'use client';

import useToggle from '@/hooks/helpers/useToggle';
import { renderIcon } from '@/lib/helpers/smartIcon';
import { IconType } from '@/types/iconType';
import clsx from 'clsx'
import { motion } from 'framer-motion';
import { ChevronDown } from 'lucide-react';
import React, { useEffect } from 'react'

interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
    initial?: boolean
    children?: React.ReactNode
    title?: string
    icon?: IconType;
    group?: string
};

function Accordion({ initial, group, title, icon, children, className, ...rest }: AccordionProps) {
    const { state, toggle, set } = useToggle(initial);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (event.target) {
                const targetGroup = (event.target as HTMLElement).getAttribute('data-group');
                if (targetGroup && targetGroup === group) {
                    set?.(false)
                }
            }
        };
        if (group && state) {
            document.addEventListener('click', handleClickOutside);
        }

        return () => {
            document.removeEventListener('click', handleClickOutside);
        };
    }, [group, set, state]);

    

    return (
        <div
            className={clsx(
                'rounded-normal',
                className
            )}
            {...rest}
        >
            <button
                data-group={group}
                onClick={toggle}
                data-active={state}
                className={clsx(
                    'hover:underline rounded-normal flex items-center h-full py-3 justify-between w-full',
                    'active:brightness-97 hover:brightness-99',
                    'data-[active=true]:rounded-b-none data-[active=true]:border-b-0 **:pointer-events-none'
                )}
            >
                <div className='flex items-center gap-2'>
                    {renderIcon(icon)}
                    <span className='text-sm2'>{title ?? ''}</span>
                </div>
                <ChevronDown
                    size={16}
                    data-active={state}
                    className={clsx(
                        'cursor-pointer stroke-foreground data-[active=false]:rotate-x-0',
                        'data-[active=true]:rotate-z-180 transition-transform duration-200'
                    )}
                />
            </button>

            <motion.div
                initial={{ height: state ? 'auto' : 0 }}
                animate={{ height: state ? 'auto' : 0 }}
                transition={{ duration: 0.1 }}
                data-active={state}
                className={clsx(
                    'mt-0 relative overflow-hidden',
                    'rounded-b-normal z-50',
                    'w-full',
                    !state && 'pointer-events-none'
                )}
            >
                <div className='py-2'>
                    {children}
                </div>
            </motion.div>
        </div>
    )
}

export default Accordion