'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { PREFERENCE_KEYS } from 'payload/shared';
import React, { useState } from 'react';
import { ChevronIcon } from '../../icons/Chevron/index.js';
import { usePreferences } from '../../providers/Preferences/index.js';
import './index.scss';
import { AnimateHeight } from '../AnimateHeight/index.js';
import { useNav } from '../Nav/context.js';
const baseClass = 'nav-group';
export const NavGroup = ({ children, isOpen: isOpenFromProps, label })=>{
    const [collapsed, setCollapsed] = useState(typeof isOpenFromProps !== 'undefined' ? !isOpenFromProps : false);
    const [animate, setAnimate] = useState(false);
    const { setPreference } = usePreferences();
    const { navOpen } = useNav();
    if (label) {
        const toggleCollapsed = ()=>{
            setAnimate(true);
            const newGroupPrefs = {};
            if (!newGroupPrefs?.[label]) {
                newGroupPrefs[label] = {
                    open: Boolean(collapsed)
                };
            } else {
                newGroupPrefs[label].open = Boolean(collapsed);
            }
            void setPreference(PREFERENCE_KEYS.NAV, {
                groups: newGroupPrefs
            }, true);
            setCollapsed(!collapsed);
        };
        return /*#__PURE__*/ _jsxDEV("div", {
            className: [
                `${baseClass}`,
                `${label}`,
                collapsed && `${baseClass}--collapsed`
            ].filter(Boolean).join(' '),
            id: `nav-group-${label}`,
            children: [
                /*#__PURE__*/ _jsxDEV("button", {
                    className: [
                        `${baseClass}__toggle`,
                        `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`
                    ].filter(Boolean).join(' '),
                    onClick: toggleCollapsed,
                    tabIndex: !navOpen ? -1 : 0,
                    type: "button",
                    children: [
                        /*#__PURE__*/ _jsxDEV("div", {
                            className: `${baseClass}__label`,
                            children: label
                        }, void 0, false, {
                            fileName: "src/elements/NavGroup/index.tsx",
                            lineNumber: 63,
                            columnNumber: 11
                        }, this),
                        /*#__PURE__*/ _jsxDEV("div", {
                            className: `${baseClass}__indicator`,
                            children: /*#__PURE__*/ _jsxDEV(ChevronIcon, {
                                className: `${baseClass}__indicator`,
                                direction: !collapsed ? 'up' : undefined
                            }, void 0, false, {
                                fileName: "src/elements/NavGroup/index.tsx",
                                lineNumber: 65,
                                columnNumber: 13
                            }, this)
                        }, void 0, false, {
                            fileName: "src/elements/NavGroup/index.tsx",
                            lineNumber: 64,
                            columnNumber: 11
                        }, this)
                    ]
                }, void 0, true, {
                    fileName: "src/elements/NavGroup/index.tsx",
                    lineNumber: 52,
                    columnNumber: 9
                }, this),
                /*#__PURE__*/ _jsxDEV(AnimateHeight, {
                    duration: animate ? 200 : 0,
                    height: collapsed ? 0 : 'auto',
                    children: /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__content`,
                        children: children
                    }, void 0, false, {
                        fileName: "src/elements/NavGroup/index.tsx",
                        lineNumber: 72,
                        columnNumber: 11
                    }, this)
                }, void 0, false, {
                    fileName: "src/elements/NavGroup/index.tsx",
                    lineNumber: 71,
                    columnNumber: 9
                }, this)
            ]
        }, void 0, true, {
            fileName: "src/elements/NavGroup/index.tsx",
            lineNumber: 46,
            columnNumber: 7
        }, this);
    }
    return /*#__PURE__*/ _jsxDEV(React.Fragment, {
        children: children
    }, void 0, false, {
        fileName: "src/elements/NavGroup/index.tsx",
        lineNumber: 78,
        columnNumber: 10
    }, this);
};

//# sourceMappingURL=index.js.map