'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { useState } from 'react';
import { ChevronIcon } from '../../icons/Chevron/index.js';
import { DragHandleIcon } from '../../icons/DragHandle/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import './index.scss';
import { AnimateHeight } from '../AnimateHeight/index.js';
import { CollapsibleProvider, useCollapsible } from './provider.js';
const baseClass = 'collapsible';
export { CollapsibleProvider, useCollapsible };
/**
   * Components that will be rendered within the collapsible provider but after the wrapper.
   */ /**
   * If set to true, clicking on the collapsible header will not toggle the collapsible state.
   * This is useful if the collapsible state is controlled externally (e.g. from a parent component or custom button).
   */ /**
   * If set to true, the toggle indicator (chevron) on the right side of the header will be hidden.
   */ export const Collapsible = ({ actions, AfterCollapsible, children, className, collapsibleStyle = 'default', disableHeaderToggle = false, disableToggleIndicator = false, dragHandleProps, header, initCollapsed, isCollapsed: collapsedFromProps, onToggle })=>{
    const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed));
    const [hoveringToggle, setHoveringToggle] = useState(false);
    const { isWithinCollapsible } = useCollapsible();
    const { t } = useTranslation();
    const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal;
    const toggleCollapsible = React.useCallback(()=>{
        if (typeof onToggle === 'function') {
            void onToggle(!isCollapsed);
        }
        setCollapsedLocal(!isCollapsed);
    }, [
        onToggle,
        isCollapsed
    ]);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            baseClass,
            className,
            dragHandleProps && `${baseClass}--has-drag-handle`,
            isCollapsed && `${baseClass}--collapsed`,
            isWithinCollapsible && `${baseClass}--nested`,
            hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`,
            `${baseClass}--style-${collapsibleStyle}`
        ].filter(Boolean).join(' '),
        children: /*#__PURE__*/ _jsxDEV(CollapsibleProvider, {
            isCollapsed: isCollapsed,
            toggle: toggleCollapsible,
            children: [
                /*#__PURE__*/ _jsxDEV("div", {
                    className: `${baseClass}__toggle-wrap${disableHeaderToggle ? ' toggle-disabled' : ''}`,
                    onMouseEnter: ()=>setHoveringToggle(true),
                    onMouseLeave: ()=>setHoveringToggle(false),
                    children: [
                        !disableHeaderToggle && /*#__PURE__*/ _jsxDEV("button", {
                            className: [
                                `${baseClass}__toggle`,
                                `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`
                            ].filter(Boolean).join(' '),
                            onClick: toggleCollapsible,
                            type: "button",
                            children: /*#__PURE__*/ _jsxDEV("span", {
                                children: t('fields:toggleBlock')
                            }, void 0, false, {
                                fileName: "src/elements/Collapsible/index.tsx",
                                lineNumber: 101,
                                columnNumber: 15
                            }, this)
                        }, void 0, false, {
                            fileName: "src/elements/Collapsible/index.tsx",
                            lineNumber: 91,
                            columnNumber: 13
                        }, this),
                        dragHandleProps && /*#__PURE__*/ _jsxDEV("div", {
                            className: `${baseClass}__drag`,
                            ...dragHandleProps.attributes,
                            ...dragHandleProps.listeners,
                            children: /*#__PURE__*/ _jsxDEV(DragHandleIcon, {}, void 0, false, {
                                fileName: "src/elements/Collapsible/index.tsx",
                                lineNumber: 111,
                                columnNumber: 15
                            }, this)
                        }, void 0, false, {
                            fileName: "src/elements/Collapsible/index.tsx",
                            lineNumber: 106,
                            columnNumber: 13
                        }, this),
                        header ? /*#__PURE__*/ _jsxDEV("div", {
                            className: [
                                `${baseClass}__header-wrap`,
                                dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`
                            ].filter(Boolean).join(' '),
                            children: header
                        }, void 0, false, {
                            fileName: "src/elements/Collapsible/index.tsx",
                            lineNumber: 115,
                            columnNumber: 13
                        }, this) : null,
                        /*#__PURE__*/ _jsxDEV("div", {
                            className: `${baseClass}__actions-wrap`,
                            children: [
                                actions ? /*#__PURE__*/ _jsxDEV("div", {
                                    className: `${baseClass}__actions`,
                                    children: actions
                                }, void 0, false, {
                                    fileName: "src/elements/Collapsible/index.tsx",
                                    lineNumber: 127,
                                    columnNumber: 24
                                }, this) : null,
                                !disableToggleIndicator && /*#__PURE__*/ _jsxDEV("div", {
                                    className: `${baseClass}__indicator`,
                                    children: /*#__PURE__*/ _jsxDEV(ChevronIcon, {
                                        direction: !isCollapsed ? 'up' : undefined
                                    }, void 0, false, {
                                        fileName: "src/elements/Collapsible/index.tsx",
                                        lineNumber: 130,
                                        columnNumber: 17
                                    }, this)
                                }, void 0, false, {
                                    fileName: "src/elements/Collapsible/index.tsx",
                                    lineNumber: 129,
                                    columnNumber: 15
                                }, this)
                            ]
                        }, void 0, true, {
                            fileName: "src/elements/Collapsible/index.tsx",
                            lineNumber: 126,
                            columnNumber: 11
                        }, this)
                    ]
                }, void 0, true, {
                    fileName: "src/elements/Collapsible/index.tsx",
                    lineNumber: 85,
                    columnNumber: 9
                }, this),
                /*#__PURE__*/ _jsxDEV(AnimateHeight, {
                    height: isCollapsed ? 0 : 'auto',
                    children: /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__content`,
                        children: children
                    }, void 0, false, {
                        fileName: "src/elements/Collapsible/index.tsx",
                        lineNumber: 136,
                        columnNumber: 11
                    }, this)
                }, void 0, false, {
                    fileName: "src/elements/Collapsible/index.tsx",
                    lineNumber: 135,
                    columnNumber: 9
                }, this),
                AfterCollapsible
            ]
        }, void 0, true, {
            fileName: "src/elements/Collapsible/index.tsx",
            lineNumber: 84,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/Collapsible/index.tsx",
        lineNumber: 71,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map