"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccordionItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const prop_types_1 = __importDefault(require("prop-types"));
// Accordion Component
const Accordion = ({ allowMultiple = false, allowToggle = true, defaultIndex = [], onChange, children, className, variant = 'default', iconPosition = 'right', bordered = false, }) => {
    const [openIndexes, setOpenIndexes] = (0, react_1.useState)(() => {
        if (Array.isArray(defaultIndex)) {
            return defaultIndex;
        }
        return defaultIndex !== undefined ? [defaultIndex] : [];
    });
    const getExpandedState = (index) => {
        return openIndexes.includes(index);
    };
    const handleItemClick = (index) => {
        const isOpen = getExpandedState(index);
        if (onChange) {
            onChange(index, isOpen);
        }
        setOpenIndexes((prevOpenIndexes) => {
            // If this item is not open, open it
            if (!isOpen) {
                return allowMultiple
                    ? [...prevOpenIndexes, index]
                    : [index];
            }
            // Otherwise keep previous state
            return prevOpenIndexes;
        });
    };
    const accordionClasses = [
        'bf-accordion',
        `bf-accordion--${variant}`,
        bordered ? 'bf-accordion--bordered' : '',
        className || '',
    ].filter(Boolean).join(' ');
    return ((0, jsx_runtime_1.jsx)("div", { className: accordionClasses, children: children }));
};
Accordion.propTypes = {
    allowMultiple: prop_types_1.default.bool,
    allowToggle: prop_types_1.default.bool,
    defaultIndex: prop_types_1.default.oneOfType([
        prop_types_1.default.number,
        prop_types_1.default.arrayOf(prop_types_1.default.number),
    ]),
    onChange: prop_types_1.default.func,
    children: prop_types_1.default.node.isRequired,
    className: prop_types_1.default.string,
    variant: prop_types_1.default.oneOf(['default', 'card', 'separated', 'minimal']),
    iconPosition: prop_types_1.default.oneOf(['left', 'right']),
    bordered: prop_types_1.default.bool,
};
// AccordionItem Component
const AccordionItem = ({ title, children, isExpanded, onToggle, itemIndex, iconPosition, className, disabled, icon, subtitle, showIcon = true, }) => {
    const contentRef = (0, react_1.useRef)(null);
    const getItemId = () => `bf-accordion-item-${itemIndex}`;
    const getButtonId = () => `bf-accordion-button-${itemIndex}`;
    const getPanelId = () => `bf-accordion-panel-${itemIndex}`;
    const itemClasses = [
        'bf-accordion-item',
        isExpanded ? 'bf-accordion-item--expanded' : '',
        disabled ? 'bf-accordion-item--disabled' : '',
        className || '',
    ].filter(Boolean).join(' ');
    const buttonClasses = [
        'bf-accordion-button',
        isExpanded ? 'bf-accordion-button--expanded' : '',
        `bf-accordion-button--icon-${iconPosition}`,
    ].filter(Boolean).join(' ');
    const panelClasses = [
        'bf-accordion-panel',
    ].filter(Boolean).join(' ');
    return ((0, jsx_runtime_1.jsxs)("div", { className: itemClasses, id: getItemId(), children: [(0, jsx_runtime_1.jsx)("h3", { children: (0, jsx_runtime_1.jsxs)("button", { className: buttonClasses, onClick: disabled ? undefined : onToggle, "aria-expanded": isExpanded, "aria-controls": getPanelId(), id: getButtonId(), disabled: disabled, children: [iconPosition === 'left' && showIcon && ((0, jsx_runtime_1.jsx)("span", { className: "bf-accordion-icon", children: (0, jsx_runtime_1.jsx)("svg", { className: "bf-accordion-icon-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })), icon && (0, jsx_runtime_1.jsx)("span", { className: "bf-accordion-custom-icon", children: icon }), (0, jsx_runtime_1.jsxs)("span", { className: "bf-accordion-title-content", children: [(0, jsx_runtime_1.jsx)("span", { className: "bf-accordion-title", children: title }), subtitle && (0, jsx_runtime_1.jsx)("span", { className: "bf-accordion-subtitle", children: subtitle })] }), iconPosition === 'right' && showIcon && ((0, jsx_runtime_1.jsx)("span", { className: "bf-accordion-icon", children: (0, jsx_runtime_1.jsx)("svg", { className: "bf-accordion-icon-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }) }), (0, jsx_runtime_1.jsx)("div", { className: panelClasses, id: getPanelId(), role: "region", "aria-labelledby": getButtonId(), hidden: !isExpanded, ref: contentRef, style: {
                    height: isExpanded ? undefined : 0,
                    overflow: isExpanded ? undefined : 'hidden',
                }, children: (0, jsx_runtime_1.jsx)("div", { className: "bf-accordion-content", children: children }) })] }));
};
exports.AccordionItem = AccordionItem;
AccordionItem.propTypes = {
    title: prop_types_1.default.node.isRequired,
    children: prop_types_1.default.node.isRequired,
    isExpanded: prop_types_1.default.bool,
    onToggle: prop_types_1.default.func,
    itemIndex: prop_types_1.default.number,
    iconPosition: prop_types_1.default.oneOf(['left', 'right']),
    className: prop_types_1.default.string,
    disabled: prop_types_1.default.bool,
    icon: prop_types_1.default.node,
    subtitle: prop_types_1.default.node,
    showIcon: prop_types_1.default.bool,
};
// Set display names and add to namespace
Accordion.Item = AccordionItem;
AccordionItem.displayName = 'AccordionItem';
exports.default = Accordion;
//# sourceMappingURL=Accordion.js.map