"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.AccordionItemHorizontal = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const box_1 = __importDefault(require("../box"));
const core_1 = require("../core");
const utils_1 = require("../utils");
const accordionItemArrow_1 = __importDefault(require("./accordionItemArrow"));
const context_1 = require("./context");
/** An accordion item (horizontal AccordionOrientation). */
const AccordionItemHorizontal = (props) => {
    const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, contentPx, title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "contentPx", "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 cursor = disabled ? 'not-allowed' : 'pointer';
    const fontWeight = typeof title === 'string' ? '500' : 'inherit';
    const expandedContentPx = contentPx ? contentPx : styles.itemHorizontal.space;
    return ((0, jsx_runtime_1.jsxs)(box_1.default, Object.assign({ alignItems: collapsedInternal ? 'normal' : 'baseline', bg: disabled ? 'disabled.bg' : undefined, borderRight: "1px solid transparent", className: (0, utils_1.cs)('vui-accordion-item-horizontal', className), color: disabled ? 'disabled.color' : undefined, column: true, cursor: disabled ? 'not-allowed' : undefined, id: `${id}`, maxW: collapsedInternal ? styles.item.minH : 'auto', minW: styles.item.minH, transitionDuration: "0ms", userSelect: disabled ? 'none' : undefined }, styles.item, { p: 0 }, rest, { children: [(0, jsx_runtime_1.jsxs)(box_1.default, { cursor: cursor, hoverBg: disabled
                    ? 'transparent'
                    : collapsedInternal
                        ? styles.item.itemTitleHoverBg
                        : styles.item.expandedItemTitleHoverBg, justifyContent: "space-between", minH: styles.item.minH, onClick: toggle, p: styles.itemHorizontal.space, w: "100%", children: [!collapsedInternal && ((0, jsx_runtime_1.jsx)(box_1.default, { fontWeight: fontWeight, opacity: disabled ? 0.5 : 1, children: title })), (0, jsx_runtime_1.jsx)(accordionItemArrow_1.default, { collapsed: collapsedInternal, color: styles.icon.color, disabled: disabled, orientation: "horizontal" })] }), !collapsedInternal ? ((0, jsx_runtime_1.jsx)(box_1.default, { p: styles.itemHorizontal.space, pt: 0, px: expandedContentPx, transitionDuration: "0ms", w: 1, children: children !== null && children !== void 0 ? children : content })) : ((0, jsx_runtime_1.jsx)(box_1.default, { cursor: cursor, flexDirection: "row-reverse", fontWeight: fontWeight, mb: styles.item.minH, mt: styles.itemHorizontal.space, onClick: toggle, transform: "rotate(-90deg)", transitionDuration: "0ms", whiteSpace: "nowrap", children: title }))] })));
};
exports.AccordionItemHorizontal = AccordionItemHorizontal;
exports.AccordionItemHorizontal.displayName = 'AccordionItemHorizontal';
exports.default = exports.AccordionItemHorizontal;
//# sourceMappingURL=accordionItemHorizontal.js.map