'use client';

import clsx from 'clsx'
import { HTMLMotionProps, motion } from 'framer-motion';
import { CloseCircle } from 'iconsax-react'
import React, { useEffect, useRef } from 'react'

interface DropdownProps extends Omit<HTMLMotionProps<"div">, "ref"> {
    active?: boolean,
    toggle?: React.MouseEventHandler<HTMLButtonElement> | undefined,
    children?: React.ReactNode
};

function Dropdown({ active, toggle, children, ...rest }: DropdownProps) {
    const boxRef = useRef<HTMLDivElement>(null);
    const closeButtonRef = useRef<HTMLButtonElement>(null);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
                closeButtonRef.current?.click();
            }
        };

        if (active) {
            document.addEventListener('click', handleClickOutside);
        }

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


    return (
        <motion.div
            ref={boxRef}
            initial={{ y: active ? 0 : '-10%', scale: active ? 1 : 0.95, opacity: active ? 1 : 0 }}
            animate={{ y: active ? 0 : '-10%', scale: active ? 1 : 0.95, opacity: active ? 1 : 0 }}
            transition={{ duration: 0.1 }}
            className={clsx(
                'box-shadow-normal',
                'fixed inset-x-0 bottom-0 bg-container rounded-normal z-50',
                'xl:absolute xl:top-18 xl:left-3 xl:right-auto xl:h-screen xl:w-[300px]',
                active === false && 'pointer-events-none'
            )}
            style={{
                top: 'calc(0px - env(safe-area-inset-top))',
                paddingTop: 'calc(env(safe-area-inset-top) + 0px)',
                minHeight: 'calc(100vh + env(safe-area-inset-top))'
            }}
            {...rest}
        >
            <div className='relative w-full h-full'>
                <button
                    ref={closeButtonRef}
                    className='xl:hidden'
                    onClick={toggle} >
                    <CloseCircle size={20} className='cursor-pointer stroke-foreground absolute left-6 top-6' />
                </button>
                {children}
            </div>
        </motion.div>
    )
}

export default Dropdown