"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var react_feather_1 = require("react-feather");
var themed_components_1 = __importStar(require("@monstrosity/utilities/themed-components"));
var apply_opacity_1 = require("@monstrosity/utilities/apply-opacity/apply-opacity");
var icon_1 = require("../Icon/icon");
var clickable_1 = require("../../primitives/Clickable/clickable");
var AccordionContent = themed_components_1.default(themed_components_1.posed.div({
    'closed': { 'height': 0 },
    'open': { 'height': 'auto' },
}))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcolor: ", ";\n\toverflow-y: hidden;\n"], ["\n\tcolor: ", ";\n\toverflow-y: hidden;\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.body;
});
var HeaderFill = themed_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tbackground: ", ";\n    margin: -1rem;\n    padding: 1rem;\n\tborder-radius: inherit;\n"], ["\n\tbackground: ", ";\n    margin: -1rem;\n    padding: 1rem;\n\tborder-radius: inherit;\n"])), function (_a) {
    var theme = _a.theme;
    return apply_opacity_1.ApplyOpacity(theme.style.colour.constrast, 0.75);
});
var AccordionRoot = themed_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tborder-bottom: 1px solid ", ";\n\tborder: 1px solid ", ";\n\tborder-top: unset;\n\tpadding: 1rem;\n\tposition: relative;\n\n\t&:first-of-type {\n\t\tborder-top-left-radius: ", ";\n\t\tborder-top-right-radius: ", ";\n\t\tborder-top: 1px solid ", ";\n\n\t\t&:hover {\n\t\t\tborder-top: 1px solid ", ";\n\t\t}\n\t\t\n\t}\n\n\t&:last-of-type {\n\t\tborder-bottom-left-radius: ", ";\n\t\tborder-bottom-right-radius: ", ";\n\t}\n\n\t&:hover {\n\t\tborder: 1px solid ", ";\n\t\tborder-top: unset;\n\t}\n\n\t& ", " {\n\t\t/* This may cause issues but allows HeaderFill to inherit */\n\t\tborder-radius: inherit;\n\t}\n"], ["\n\tborder-bottom: 1px solid ", ";\n\tborder: 1px solid ", ";\n\tborder-top: unset;\n\tpadding: 1rem;\n\tposition: relative;\n\n\t&:first-of-type {\n\t\tborder-top-left-radius: ", ";\n\t\tborder-top-right-radius: ", ";\n\t\tborder-top: 1px solid ", ";\n\n\t\t&:hover {\n\t\t\tborder-top: 1px solid ", ";\n\t\t}\n\t\t\n\t}\n\n\t&:last-of-type {\n\t\tborder-bottom-left-radius: ", ";\n\t\tborder-bottom-right-radius: ", ";\n\t}\n\n\t&:hover {\n\t\tborder: 1px solid ", ";\n\t\tborder-top: unset;\n\t}\n\n\t& ", " {\n\t\t/* This may cause issues but allows HeaderFill to inherit */\n\t\tborder-radius: inherit;\n\t}\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.light;
}, function (_a) {
    var borderless = _a.borderless, theme = _a.theme;
    return borderless ? 'unset' : theme.style.colour.text.light;
}, function (_a) {
    var borderless = _a.borderless, theme = _a.theme;
    return borderless ? 'unset' : theme.style.radius;
}, function (_a) {
    var borderless = _a.borderless, theme = _a.theme;
    return borderless ? 'unset' : theme.style.radius;
}, function (_a) {
    var borderless = _a.borderless, theme = _a.theme;
    return borderless ? 'unset' : theme.style.colour.text.light;
}, function (_a) {
    var borderless = _a.borderless, theme = _a.theme;
    return borderless ? 'unset' : apply_opacity_1.ApplyOpacity(theme.style.colour.highlight, 0.75);
}, function (_a) {
    var borderless = _a.borderless, theme = _a.theme;
    return borderless ? 'unset' : theme.style.radius;
}, function (_a) {
    var borderless = _a.borderless, theme = _a.theme;
    return borderless ? 'unset' : theme.style.radius;
}, function (_a) {
    var borderless = _a.borderless, theme = _a.theme;
    return borderless ? 'unset' : apply_opacity_1.ApplyOpacity(theme.style.colour.highlight, 0.75);
}, clickable_1.ClickableRoot);
var Header = themed_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex: 1;\n\tjustify-content: space-between;\n\talign-items: center;\n\tcolor: ", ";\n\n\t", "\n\n\t& ", " {\n\t\tcolor: ", ";\n\t}\n"], ["\n\tdisplay: flex;\n\tflex: 1;\n\tjustify-content: space-between;\n\talign-items: center;\n\tcolor: ", ";\n\n\t", "\n\n\t& ", " {\n\t\tcolor: ", ";\n\t}\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.body;
}, function (_a) {
    var borderless = _a.borderless, simple = _a.simple;
    return !simple && !borderless && HeaderFill;
}, icon_1.IconRoot, function (_a) {
    var theme = _a.theme, iconColour = _a.iconColour;
    return iconColour || theme.style.colour.text.body;
});
var Rule = themed_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tmargin: 1rem -1rem;\n\twidth: 100%;\n\theight: 1px;\n\n\t&::before {\n\t\tcontent: '';\n\t\twidth: 100%;\n\t\tposition: absolute;\n\t\theight: 1px;\n\t\tbackground: ", ";\n\t\ttransition: background-color 300ms;\n\t}\n"], ["\n\tmargin: 1rem -1rem;\n\twidth: 100%;\n\theight: 1px;\n\n\t&::before {\n\t\tcontent: '';\n\t\twidth: 100%;\n\t\tposition: absolute;\n\t\theight: 1px;\n\t\tbackground: ", ";\n\t\ttransition: background-color 300ms;\n\t}\n"])), function (_a) {
    var theme = _a.theme, isOpen = _a.isOpen, borderless = _a.borderless;
    return isOpen && !borderless ? theme.style.colour.text.light : 'transparent';
});
var ChevronContainer = themed_components_1.posed(themed_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject([" \n\ttransition: transform 150ms; \n\tdisplay: flex;\n"], [" \n\ttransition: transform 150ms; \n\tdisplay: flex;\n"]))))({
    'down': {
        'transform': 'rotate(0deg)',
    },
    'up': {
        'transform': 'rotate(-180deg)',
    },
});
exports.Accordion = function (_a) {
    var isOpen = _a.isOpen, icon = _a.icon, children = _a.children, label = _a.label, simple = _a.simple, iconColour = _a.iconColour, onChange = _a.onChange, id = _a.id, hideChevron = _a.hideChevron, borderless = _a.borderless;
    var _b = __read(react_1.useState(isOpen), 2), isOpenHook = _b[0], setIsOpen = _b[1];
    var isOpenState = onChange ? isOpen : isOpenHook;
    var onClick = function () {
        /* Managed by Parent */
        if (onChange)
            onChange(id, !isOpenState);
        /* Managed by State */
        else
            setIsOpen(!isOpenState);
    };
    return (react_1.default.createElement(AccordionRoot, { borderless: borderless },
        react_1.default.createElement(clickable_1.Clickable, { onClick: onClick, ariaLabel: 'Click to expand' },
            react_1.default.createElement(Header, { iconColour: iconColour, borderless: borderless, simple: simple },
                icon && react_1.default.createElement(icon_1.Icon, { icon: icon }),
                label,
                !hideChevron && react_1.default.createElement(ChevronContainer, { pose: isOpenState ? 'up' : 'down', initialPose: 'down' },
                    react_1.default.createElement(react_feather_1.ChevronDown, null)))),
        react_1.default.createElement(AccordionContent, { pose: isOpenState ? 'open' : 'closed', initialPose: 'closed' },
            !simple && react_1.default.createElement(Rule, { isOpen: isOpenState, borderless: borderless }),
            children)));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
