"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Heading = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const auto_headings_1 = require("../../utilities/auto-headings");
const Theme_1 = require("../Theme");
const legacy_1 = require("../../utilities/legacy");
const typography_styles_css_1 = __importDefault(require("../../utilities/typography-styles.css"));
const Heading_css_1 = __importDefault(require("./Heading.css"));
function Heading({ id, children, role, level: explicitLevel, }) {
    var _a;
    const { headingLevel1, headingLevel2, headingLevel3 } = Theme_1.useThemeConfiguration();
    const semanticLevel = auto_headings_1.useAutoHeadingLevel();
    const visualLevel = (_a = explicitLevel !== null && explicitLevel !== void 0 ? explicitLevel : semanticLevel) !== null && _a !== void 0 ? _a : 0;
    const Element = role === 'presentation' || semanticLevel == null
        ? 'p'
        : `h${semanticLevel}`;
    const className = css_utilities_1.classNames(Heading_css_1.default.Heading, visualLevel && Heading_css_1.default[css_utilities_1.variationName('h', visualLevel)], visualLevel >= 2 && legacy_1.utilityDefaultTextColorEmphasized, visualLevel === 1 &&
        headingLevel1.typographyStyle &&
        typography_styles_css_1.default[headingLevel1.typographyStyle], visualLevel === 2 &&
        headingLevel2.typographyStyle &&
        typography_styles_css_1.default[headingLevel2.typographyStyle], visualLevel === 3 &&
        headingLevel3.typographyStyle &&
        typography_styles_css_1.default[headingLevel3.typographyStyle]);
    return (<Element id={id} tabIndex={id ? -1 : undefined} className={className}>
      {children}
    </Element>);
}
exports.Heading = Heading;