import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useCallback, useState, useRef, } from 'react';
import { Collapse } from 'antd';
import { PanelExtra } from './panel-extra';
import { PanelHeader } from './panel-header';
import { PanelExpand } from './panel-expand';
import { CollapseCSS } from './collapse-panel.style';
export const CollapsePanel = ({ children, title, onDelete, expandExtra, deletable = true, className, }) => {
    const ignoreRef = useRef(false);
    const [activeKey, setActiveKey] = useState();
    const expandIcon = useCallback(({ isActive }) => (_jsx(PanelExpand, { isActive: isActive, children: expandExtra })), [expandExtra]);
    const handleChange = useCallback((key) => {
        if (ignoreRef.current) {
            ignoreRef.current = false;
        }
        else {
            setActiveKey(key);
        }
    }, []);
    const handleDelete = useCallback((event) => {
        ignoreRef.current = true;
        onDelete === null || onDelete === void 0 ? void 0 : onDelete(event);
    }, [onDelete]);
    return (_jsx(Collapse, { css: CollapseCSS, className: className, activeKey: activeKey, onChange: handleChange, expandIcon: expandIcon, children: _jsx(Collapse.Panel, { header: _jsx(PanelHeader, { title: title }), extra: deletable ? _jsx(PanelExtra, { onDelete: handleDelete }) : undefined, children: children }, title) }));
};
