"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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Collapsable = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const blue_1 = require("../../theme/definitions/blue");
const theme_1 = require("../../theme");
const Box_1 = require("../Box");
const Flex_1 = require("../Flex");
const Heading_1 = require("../Heading");
const Icon_1 = require("../Icon");
const Collapsable = (_a) => {
    var { title, defaultOpen, clickable = true, onClick, children, iconVariant = 'default' } = _a, restProps = __rest(_a, ["title", "defaultOpen", "clickable", "onClick", "children", "iconVariant"]);
    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen || false);
    const toggle = () => {
        const newState = !isOpen;
        setIsOpen(newState);
        if (onClick)
            onClick(newState);
    };
    const clickableProps = {
        onClick: toggle,
        style: { cursor: 'pointer' },
    };
    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, Object.assign({}, restProps, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, Object.assign({ variant: "raw", justify: "spaced" }, (clickable ? clickableProps : {}), { children: [(0, jsx_runtime_1.jsx)(Heading_1.Heading, Object.assign({ variant: "h5", margin: "0 l 0 0" }, { children: title }), void 0), (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ variant: "circle", icon: theme_1.polyIcons.ChevronUp, size: "32px", scale: 1, color: isOpen
                            ? blue_1.COLLAPSABLE.iconVariants[iconVariant].iconColor.open
                            : blue_1.COLLAPSABLE.iconVariants[iconVariant].iconColor.closed, bg: isOpen
                            ? blue_1.COLLAPSABLE.iconVariants[iconVariant].bgColor.open
                            : blue_1.COLLAPSABLE.iconVariants[iconVariant].bgColor.open, rotate: isOpen ? undefined : '180deg' }, (clickable ? {} : clickableProps)), void 0)] }), void 0), isOpen && ((0, jsx_runtime_1.jsx)(Box_1.Box, Object.assign({ variant: "raw", margin: "l 0 0 0" }, { children: children }), void 0))] }), void 0));
};
exports.Collapsable = Collapsable;
//# sourceMappingURL=Collapsable.js.map