"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
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 box_1 = require("../box");
const core_1 = require("../core");
const list_1 = require("../list");
const utils_1 = require("../utils");
const accordionItemArrow_1 = __importDefault(require("./accordionItemArrow"));
const context_1 = require("./context");
/** An accordion item. */
const AccordionItem = (props) => {
    const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, iconPosition = 'end', title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "iconPosition", "title", "onToggle"]);
    const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
    const styles = (0, core_1.useStyleConfig)('Accordion', (0, context_1.useAccordionContext)());
    (0, react_1.useEffect)(() => {
        setIsCollapsedInternal(!!collapsed);
    }, [collapsed]);
    const toggle = () => {
        if (!disabled) {
            onToggle === null || onToggle === void 0 ? void 0 : onToggle({ id, collapsed: !collapsedInternal });
            setIsCollapsedInternal(!collapsedInternal);
        }
    };
    const isIconStart = iconPosition === 'start';
    const isIconEnd = iconPosition === 'end';
    return ((0, jsx_runtime_1.jsxs)(list_1.ListItem, Object.assign({ borderBottom: "1px solid transparent", borderColor: styles.item.borderColor, className: (0, utils_1.cs)('vui-accordion-item', className), color: "yellow", disabled: disabled, disabledBg: styles.item.disabledBg, disabledColor: styles.item.disabledColor, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%" }, rest, { children: [(0, jsx_runtime_1.jsxs)(box_1.Box, Object.assign({ center: true, color: "yellow", cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: disabled
                    ? 'transparent'
                    : collapsedInternal
                        ? styles.item.itemTitleHoverBg
                        : styles.item.expandedItemTitleHoverBg, justifyContent: iconPosition === 'start' ? 'initial' : 'space-between', onClick: toggle, px: 2, w: "100%" }, styles.item, { children: [isIconStart && ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(accordionItemArrow_1.default, { collapsed: collapsedInternal, color: styles.icon.color }) })), (0, jsx_runtime_1.jsx)(box_1.Box, { fontWeight: typeof title === 'string' ? '500' : 'inherit', ml: isIconStart ? 2 : 0, opacity: disabled ? 0.5 : 1, children: title }), isIconEnd && ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(accordionItemArrow_1.default, { collapsed: collapsedInternal, color: styles.icon.color, disabled: disabled }) }))] })), !collapsedInternal && ((0, jsx_runtime_1.jsx)(box_1.Box, { mb: 2, mt: 2, px: 2, py: 1, w: "100%", children: children !== null && children !== void 0 ? children : content }))] })));
};
exports.AccordionItem = AccordionItem;
exports.AccordionItem.displayName = 'AccordionItem';
exports.default = exports.AccordionItem;
//# sourceMappingURL=accordionItem.js.map