"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Marker = exports.Breadcrumbs = void 0;
/* eslint-disable jsx-a11y/no-redundant-roles */
const react_1 = __importDefault(require("react"));
const Icon_1 = require("../Icon");
const Text_1 = require("../Text");
const Theme_1 = require("../Theme");
const __1 = require("..");
const Breadcrumbs_css_1 = __importDefault(require("./Breadcrumbs.css"));
const NUMBER_STYLE_MAP = {
    none: () => null,
    decimal: (index) => <Marker>{index.toString()}</Marker>,
    decimalLeadingZero: (index) => (<Marker>{index.toString().padStart(2, '0')}</Marker>),
};
function Breadcrumbs({ active, breadcrumbs }) {
    const { buyerJourney: { numberStyle = 'none', chevronIconSeparator = true, typographyStyle, }, } = Theme_1.useThemeConfiguration();
    return (
    // eslint-disable-next-line @shopify/jsx-no-hardcoded-content
    <nav aria-label="Breadcrumbs">
      <ol className={Breadcrumbs_css_1.default.Breadcrumbs} role="list">
        {breadcrumbs.map(({ id, to, disabled, content }, index) => {
        const showSeparator = breadcrumbs.length !== index + 1;
        const isActive = active === id;
        const isClickable = !isActive && !disabled;
        const ariaCurrent = isActive ? 'step' : false;
        const marker = NUMBER_STYLE_MAP[numberStyle](index + 1);
        const breadcrumbContent = isClickable ? (<Text_1.Text size="small" style={typographyStyle}>
              <__1.Link to={to}>
                {marker}
                {content}
              </__1.Link>
            </Text_1.Text>) : (<Text_1.Text emphasized={isActive} subdued={!isActive} size="small" style={typographyStyle}>
              {marker}
              {content}
            </Text_1.Text>);
        return (<li className={Breadcrumbs_css_1.default.Item} key={id} aria-current={ariaCurrent}>
              {breadcrumbContent}
              {showSeparator && (<span className={Breadcrumbs_css_1.default.Separator}>
                  {chevronIconSeparator && (<Icon_1.Icon source="chevronRight" size="small" appearance="subdued"/>)}
                </span>)}
            </li>);
    })}
      </ol>
    </nav>);
}
exports.Breadcrumbs = Breadcrumbs;
function Marker({ children }) {
    return <span className={Breadcrumbs_css_1.default.Marker}>{children}</span>;
}
exports.Marker = Marker;