'use client';
import React, { useState } from 'react';
import AnimateHeightImport from 'react-animate-height';
const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
import { Chevron } from '../../icons/Chevron/index.js';
import { DragHandle } from '../../icons/DragHandle/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { CollapsibleProvider, useCollapsible } from './provider.js';
const baseClass = 'collapsible';
export const Collapsible = ({ actions, children, className, collapsed: collapsedFromProps, collapsibleStyle = 'default', dragHandleProps, header, initCollapsed, onToggle })=>{
    const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed));
    const [hoveringToggle, setHoveringToggle] = useState(false);
    const { withinCollapsible } = useCollapsible();
    const { t } = useTranslation();
    const collapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal;
    const toggleCollapsible = React.useCallback(()=>{
        if (typeof onToggle === 'function') onToggle(!collapsed);
        setCollapsedLocal(!collapsed);
    }, [
        onToggle,
        collapsed
    ]);
    return /*#__PURE__*/ React.createElement("div", {
        className: [
            baseClass,
            className,
            dragHandleProps && `${baseClass}--has-drag-handle`,
            collapsed && `${baseClass}--collapsed`,
            withinCollapsible && `${baseClass}--nested`,
            hoveringToggle && `${baseClass}--hovered`,
            `${baseClass}--style-${collapsibleStyle}`
        ].filter(Boolean).join(' ')
    }, /*#__PURE__*/ React.createElement(CollapsibleProvider, {
        collapsed: collapsed,
        toggle: toggleCollapsible
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__toggle-wrap`,
        onMouseEnter: ()=>setHoveringToggle(true),
        onMouseLeave: ()=>setHoveringToggle(false)
    }, dragHandleProps && /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__drag`,
        ...dragHandleProps.attributes,
        ...dragHandleProps.listeners
    }, /*#__PURE__*/ React.createElement(DragHandle, null)), /*#__PURE__*/ React.createElement("button", {
        className: [
            `${baseClass}__toggle`,
            `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`
        ].filter(Boolean).join(' '),
        onClick: toggleCollapsible,
        type: "button"
    }, /*#__PURE__*/ React.createElement("span", null, t('fields:toggleBlock'))), header && /*#__PURE__*/ React.createElement("div", {
        className: [
            `${baseClass}__header-wrap`,
            dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`
        ].filter(Boolean).join(' ')
    }, header && header), /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__actions-wrap`
    }, actions && /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__actions`
    }, actions), /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__indicator`
    }, /*#__PURE__*/ React.createElement(Chevron, {
        direction: !collapsed ? 'up' : undefined
    })))), /*#__PURE__*/ React.createElement(AnimateHeight, {
        duration: 200,
        height: collapsed ? 0 : 'auto'
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__content`
    }, children))));
};

//# sourceMappingURL=index.js.map