'use client';
import React, { useEffect, useState } from 'react';
import AnimateHeightImport from 'react-animate-height';
import { Chevron } from '../../icons/Chevron/index.js';
import { usePreferences } from '../../providers/Preferences/index.js';
import { useNav } from '../Nav/context.js';
const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
const baseClass = 'nav-group';
const NavGroup = ({ children, label })=>{
    const [collapsed, setCollapsed] = useState(true);
    const [animate, setAnimate] = useState(false);
    const { getPreference, setPreference } = usePreferences();
    const { navOpen } = useNav();
    const preferencesKey = `collapsed-${label}-groups`;
    useEffect(()=>{
        if (label) {
            const setCollapsedFromPreferences = async ()=>{
                const preferences = await getPreference(preferencesKey) || [];
                setCollapsed(preferences.indexOf(label) !== -1);
            };
            void setCollapsedFromPreferences();
        }
    }, [
        getPreference,
        label,
        preferencesKey
    ]);
    if (label) {
        const toggleCollapsed = async ()=>{
            setAnimate(true);
            let preferences = await getPreference(preferencesKey) || [];
            if (collapsed) {
                preferences = preferences.filter((preference)=>label !== preference);
            } else {
                preferences.push(label);
            }
            void setPreference(preferencesKey, preferences);
            setCollapsed(!collapsed);
        };
        return /*#__PURE__*/ React.createElement("div", {
            className: [
                `${baseClass}`,
                `${label}`,
                collapsed && `${baseClass}--collapsed`
            ].filter(Boolean).join(' '),
            id: `nav-group-${label}`
        }, /*#__PURE__*/ React.createElement("button", {
            className: [
                `${baseClass}__toggle`,
                `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`
            ].filter(Boolean).join(' '),
            onClick: toggleCollapsed,
            tabIndex: !navOpen ? -1 : 0,
            type: "button"
        }, /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__label`
        }, label), /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__indicator`
        }, /*#__PURE__*/ React.createElement(Chevron, {
            className: `${baseClass}__indicator`,
            direction: !collapsed ? 'up' : undefined
        }))), /*#__PURE__*/ React.createElement(AnimateHeight, {
            duration: animate ? 200 : 0,
            height: collapsed ? 0 : 'auto'
        }, /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__content`
        }, children)));
    }
    return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
};
export default NavGroup;

//# sourceMappingURL=index.js.map