import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useTheme } from '../../theme/ThemeContext';
export const Accordion = ({ header, defaultOpen = false, className, children }) => {
    const [isOpen, setIsOpen] = React.useState(defaultOpen);
    const contentRef = React.useRef(null);
    const [height, setHeight] = React.useState(defaultOpen ? undefined : 0);
    const theme = useTheme();
    React.useEffect(() => {
        setIsOpen(defaultOpen);
    }, [defaultOpen]);
    const recalcHeight = React.useCallback(() => {
        const node = contentRef.current;
        if (!node || !isOpen)
            return;
        setHeight((prev) => {
            if (prev === undefined)
                return prev;
            return node.scrollHeight;
        });
    }, [isOpen]);
    const toggle = React.useCallback(() => {
        setIsOpen((prev) => !prev);
    }, []);
    React.useEffect(() => {
        const node = contentRef.current;
        if (!node)
            return;
        if (isOpen) {
            const target = node.scrollHeight;
            setHeight(target);
        }
        else {
            const current = node.scrollHeight;
            setHeight(current);
            requestAnimationFrame(() => setHeight(0));
        }
    }, [isOpen, children]);
    React.useEffect(() => {
        const node = contentRef.current;
        if (!node)
            return;
        const onEnd = (event) => {
            if (event.propertyName !== 'height')
                return;
            if (isOpen) {
                setHeight(undefined);
            }
        };
        node.addEventListener('transitionend', onEnd);
        return () => {
            node.removeEventListener('transitionend', onEnd);
        };
    }, [isOpen]);
    React.useEffect(() => {
        const node = contentRef.current;
        if (!node)
            return;
        const mutationObserver = new MutationObserver(() => {
            requestAnimationFrame(recalcHeight);
        });
        mutationObserver.observe(node, {
            childList: true,
            subtree: true,
            characterData: true,
            attributes: true,
            attributeFilter: ['style', 'class']
        });
        let resizeObserver;
        if (typeof window !== 'undefined' && 'ResizeObserver' in window) {
            resizeObserver = new ResizeObserver(() => {
                requestAnimationFrame(recalcHeight);
            });
            resizeObserver.observe(node);
        }
        return () => {
            mutationObserver.disconnect();
            resizeObserver?.disconnect();
        };
    }, [recalcHeight]);
    return (_jsxs("div", { className: [theme.accordion?.container, className].filter(Boolean).join(' '), children: [_jsxs("button", { type: 'button', onClick: toggle, "aria-expanded": isOpen, className: theme.accordion?.headerButton, children: [_jsx("span", { className: theme.accordion?.headerText, children: header }), _jsx("span", { className: [
                            theme.accordion?.icon,
                            isOpen ? theme.accordion?.iconOpen : '',
                        ].filter(Boolean).join(' '), "aria-hidden": 'true', children: _jsx("svg", { className: theme.accordion?.iconSvg, viewBox: '0 0 12 8', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M1 1.5 6 6.5 11 1.5', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' }) }) })] }), _jsx("div", { ref: contentRef, style: { height: height === undefined ? undefined : `${height}px` }, className: [
                    theme.accordion?.contentWrapper,
                    isOpen ? theme.accordion?.contentOpen : theme.accordion?.contentClosed
                ].filter(Boolean).join(' '), children: _jsx("div", { className: theme.accordion?.contentBody, children: children }) })] }));
};
export default Accordion;
