"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShellDisclosure = exports.ShellFooter = exports.ShellSectionContent = exports.ShellSection = exports.ShellSubheader = exports.Shell = void 0;
const react_1 = __importStar(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const Collapsible_1 = require("../Collapsible");
const InlineStack_1 = require("../InlineStack");
const HeadingGroup_1 = require("../HeadingGroup");
const Icon_1 = require("../Icon");
const Text_1 = require("../Text");
const legacy_1 = require("../../utilities/legacy");
const Shell_css_1 = __importDefault(require("./Shell.css"));
function Shell({ children, headerPosition, subheaderPosition, footerPosition, subheaderHidden, }) {
    return (<div className={css_utilities_1.classNames(Shell_css_1.default.Shell, headerPosition &&
        Shell_css_1.default[css_utilities_1.variationName('headerPosition', headerPosition)], subheaderPosition &&
        Shell_css_1.default[css_utilities_1.variationName('subheaderPosition', subheaderPosition)], footerPosition &&
        Shell_css_1.default[css_utilities_1.variationName('footerPosition', footerPosition)], subheaderHidden && Shell_css_1.default.subheaderHidden)}>
      {children}
    </div>);
}
exports.Shell = Shell;
function ShellSubheader({ children, alignment }) {
    return (<div className={css_utilities_1.classNames(Shell_css_1.default.Subheader, Shell_css_1.default[css_utilities_1.variationName('Subheader-alignment', alignment)])}>
      <div className={Shell_css_1.default.SubheaderInner}>{children}</div>
    </div>);
}
exports.ShellSubheader = ShellSubheader;
function ShellSection({ bordered, background, inlineSize, blockSize, children, secondary, backgroundImage, }) {
    const Element = secondary ? 'aside' : 'div';
    const style = backgroundImage
        ? {
            backgroundImage: `url(${JSON.stringify(backgroundImage)})`,
        }
        : undefined;
    return (<HeadingGroup_1.HeadingGroup>
      <Element className={css_utilities_1.classNames(Shell_css_1.default.Section, bordered && Shell_css_1.default['Section-bordered'], background && backgroundToLegacyClassName(background), background && Shell_css_1.default[css_utilities_1.variationName('Section-background', background)], inlineSize && Shell_css_1.default[css_utilities_1.variationName('Section-inlineSize', inlineSize)], blockSize && Shell_css_1.default[css_utilities_1.variationName('Section-blockSize', blockSize)], secondary && Shell_css_1.default['Section-secondary'])} style={inlineSize === 'toContainerEdge' ? style : undefined}>
        <div className={Shell_css_1.default.SectionInner} style={inlineSize === 'contentSize' ? style : undefined}>
          {children}
        </div>
      </Element>
    </HeadingGroup_1.HeadingGroup>);
}
exports.ShellSection = ShellSection;
function ShellSectionContent({ children }) {
    return (<div className={Shell_css_1.default.SectionContent}>
      <div className={Shell_css_1.default.SectionContentInner}>{children}</div>
    </div>);
}
exports.ShellSectionContent = ShellSectionContent;
function ShellFooter({ children }) {
    return (<HeadingGroup_1.HeadingGroup>
      <footer role="contentinfo" className={Shell_css_1.default.Footer}>
        <div className={Shell_css_1.default.FooterInner}>{children}</div>
      </footer>
    </HeadingGroup_1.HeadingGroup>);
}
exports.ShellFooter = ShellFooter;
// TODO: a11y
function ShellDisclosure({ children, detail, labels, icon, bordered, background, }) {
    const [open, setOpen] = react_1.useState(false);
    const { text, icon: disclosureIcon } = open
        ? {
            text: labels.closed,
            icon: <Icon_1.Icon source="chevronUp" size="small" appearance="interactive"/>,
        }
        : {
            text: labels.open,
            icon: (<Icon_1.Icon source="chevronDown" size="small" appearance="interactive"/>),
        };
    const contentId = 'disclosure_content';
    return (<aside className={css_utilities_1.classNames(Shell_css_1.default.Disclosure, bordered && Shell_css_1.default['Disclosure-bordered'], background && backgroundToLegacyClassName(background), background &&
        Shell_css_1.default[css_utilities_1.variationName('Disclosure-background', background)])}>
      <button type="button" className={css_utilities_1.classNames(Shell_css_1.default.DisclosureButton, legacy_1.utilityDefaultBorderColor)} onClick={() => setOpen((open) => !open)} aria-pressed={open} aria-controls={contentId} aria-expanded={open}>
        <span className={Shell_css_1.default.DisclosureLayout}>
          <InlineStack_1.InlineStack spacing="tight" alignment="center">
            <Icon_1.Icon source={icon} size="large" appearance="interactive"/>
            <Text_1.Text>{text}</Text_1.Text>
            {disclosureIcon}
          </InlineStack_1.InlineStack>
          {detail}
        </span>
      </button>
      <Collapsible_1.Collapsible open={open} id={contentId}>
        <div className={css_utilities_1.classNames(Shell_css_1.default.DisclosureContent, legacy_1.utilityDefaultBorderColor)}>
          <div className={Shell_css_1.default.DisclosureContentInner}>{children}</div>
        </div>
      </Collapsible_1.Collapsible>
    </aside>);
}
exports.ShellDisclosure = ShellDisclosure;
function backgroundToLegacyClassName(background) {
    switch (background) {
        case 'surfacePrimary':
            return legacy_1.colorSurfacePrimary;
        case 'surfaceSecondary':
            return legacy_1.colorSurfaceSecondary;
        case 'surfaceTertiary':
            return legacy_1.colorSurfaceTertiary;
    }
}