'use strict';

var React = require('react');
var classnames = require('classnames');
var jobberHooks = require('@jobber/hooks');
var Icon = require('./Icon-cjs.js');
var Typography = require('./Typography-cjs.js');

var styles = {"arrowIconWrapper":"VMuRkKeqAs8-","details":"fNHz-uKoICo-","summary":"_8BfGPs1d3OI-","summaryWrap":"lPbWm-JxIOc-","customSummaryWrap":"qCHHx-9sUDU-","content":"v4nYwpvvlh8-","openAnimation":"R-IWZjEaJeM-","spinning":"UfV5y-kjRUE-"};

function Disclosure({ children, title, defaultOpen = false, onToggle, open, UNSAFE_className = {}, UNSAFE_style = {}, }) {
    var _a, _b, _c, _d;
    const [internalOpen, setInternalOpen] = React.useState(defaultOpen || open || false);
    const isOpen = open !== undefined ? open : internalOpen;
    const [titleRef, { exactWidth }] = jobberHooks.useResizeObserver();
    const isBelowBreakpoint = exactWidth && exactWidth < jobberHooks.Breakpoints.small;
    const isTitleString = typeof title === "string";
    const containerClassNames = classnames(styles.details, UNSAFE_className.container);
    const summaryClassNames = classnames(styles.summary, UNSAFE_className.summary);
    const summaryWrapClassNames = classnames(styles.summaryWrap, { [styles.customSummaryWrap]: !isTitleString }, UNSAFE_className.summaryWrap);
    const arrowIconWrapperClassNames = classnames(styles.arrowIconWrapper, UNSAFE_className.arrowIconWrapper);
    const contentClassNames = classnames(styles.content, UNSAFE_className.content);
    return (React.createElement("details", { open: isOpen, className: containerClassNames, style: UNSAFE_style.container },
        React.createElement("summary", { className: summaryClassNames, style: UNSAFE_style.summary, onClick: handleToggle },
            React.createElement("div", { className: summaryWrapClassNames, style: UNSAFE_style.summaryWrap, ref: titleRef },
                React.createElement(DisclosureTitle, { title: title, size: isBelowBreakpoint ? "base" : "large", isTitleString: isTitleString, UNSAFE_className: UNSAFE_className.title, UNSAFE_style: UNSAFE_style.title }),
                React.createElement("span", { className: arrowIconWrapperClassNames, style: UNSAFE_style.arrowIconWrapper },
                    React.createElement(Icon.Icon, { name: "arrowDown", color: "interactive", UNSAFE_className: {
                            svg: (_a = UNSAFE_className.icon) === null || _a === void 0 ? void 0 : _a.svg,
                            path: (_b = UNSAFE_className.icon) === null || _b === void 0 ? void 0 : _b.path,
                        }, UNSAFE_style: {
                            svg: (_c = UNSAFE_style.icon) === null || _c === void 0 ? void 0 : _c.svg,
                            path: (_d = UNSAFE_style.icon) === null || _d === void 0 ? void 0 : _d.path,
                        } })))),
        React.createElement("span", { className: contentClassNames, style: UNSAFE_style.content }, children)));
    function handleToggle(event) {
        event.preventDefault();
        setInternalOpen(!isOpen);
        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isOpen);
    }
}
function DisclosureTitle({ title, size, isTitleString, UNSAFE_className, UNSAFE_style, }) {
    if (!isTitleString)
        return React.createElement(React.Fragment, null, title);
    return (React.createElement(Typography.Typography, { element: "h4", size: size, fontWeight: "bold", textColor: "heading", UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, title));
}

exports.Disclosure = Disclosure;
