import { useRef, useEffect, useState } from 'react';
import { Events, Complements } from '../../index';

export default function Faq1({
    data,
    className,
}: {
    data: Faq.Faq1[];
    className?: { question?: string; answer?: string };
}) {
    const contentRefs = useRef<HTMLDivElement[]>([]);
    const [maxHeights, setMaxHeights] = useState<number[]>([]);
    const [open, setOpen] = useState<boolean>(false);

    useEffect(() => {
        contentRefs.current = contentRefs.current.slice(0, data.length);
        setMaxHeights(data.map(() => 0));
    }, [data]);

    useEffect(() => {
        if (!open) {
            contentRefs.current = contentRefs.current.slice(0, data.length);
            setMaxHeights(data.map(() => 0));
        }
    }, [open]);

    function handleToggle(index: number, open: boolean) {
        if (contentRefs.current[index]) {
            const element = contentRefs.current[index];
            if (element) {
                setMaxHeights((prevHeights) => {
                    const newHeights = [...prevHeights];
                    newHeights[index] = open ? element.scrollHeight : 0;
                    return newHeights;
                });
            }
        }
        setOpen(open);
    }

    return (
        <ul className='md:w-[80%] mb-5 mx-auto'>
            {data.map((item, index) => (
                <li key={`faq-${Events.Utils.slugify(item.question)}-${index}`}>
                    <details
                        onToggle={(event) =>
                            handleToggle(index, event.currentTarget.open)
                        }>
                        <summary
                            style={{ listStyle: 'none' }}
                            className={`my-[1px] mx-2 p-[18px] italic cursor-pointer select-none rounded ${className?.question ? className.question : null}`}>
                            {item.question}
                        </summary>
                        <div
                            ref={(el) => {
                                if (el) {
                                    contentRefs.current[index] = el;
                                }
                            }}
                            style={{
                                maxHeight: maxHeights[index],
                                transition: 'max-height 0.3s ease-in-out',
                                overflow: 'hidden',
                            }}
                            className={`max-h-fit overflow-hidden p-2 my-1 mx-4 shadow-sm ${className?.answer ? className.answer : null}`}>
                            <Complements.Child
                                item={item.answer}
                                name={item.question}
                                className='font-light text-justify px-6 py-1 my-2'
                            />
                        </div>
                    </details>
                </li>
            ))}
        </ul>
    );
}