"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.appContext = void 0;
const react_1 = __importDefault(require("react"));
require("../style.css");
const components_1 = require("../components");
const translate = (key) => {
    var _a;
    const translationMap = new Map([
        ['january', () => 'January'],
        ['close', () => 'Close'],
        ['expand', () => 'Expand notice'],
        ['processing', () => 'Processing…'],
        ['submit', () => 'Submit'],
        ['dismissNotification', () => 'Dismiss notification'],
        ['january', () => 'January'],
        ['february', () => 'February'],
        ['march', () => 'March'],
        ['april', () => 'April'],
        ['may', () => 'May'],
        ['june', () => 'June'],
        ['july', () => 'July'],
        ['august', () => 'August'],
        ['september', () => 'September'],
        ['october', () => 'October'],
        ['november', () => 'November'],
        ['december', () => 'December'],
        ['monday', () => 'Monday'],
        ['tuesday', () => 'Tuesday'],
        ['wednesday', () => 'Wednesday'],
        ['thursday', () => 'Thursday'],
        ['friday', () => 'Friday'],
        ['saturday', () => 'Saturday'],
        ['sunday', () => 'Sunday'],
        ['mondayAbbreviation', () => 'Mo'],
        ['tuesdayAbbreviation', () => 'Tu'],
        ['wednesdayAbbreviation', () => 'We'],
        ['thursdayAbbreviation', () => 'Th'],
        ['fridayAbbreviation', () => 'Fr'],
        ['saturdayAbbreviation', () => 'Sa'],
        ['sundayAbbreviation', () => 'Su'],
    ]);
    const translation = (_a = translationMap.get(key)) === null || _a === void 0 ? void 0 : _a();
    return translation == null ? key : translation;
};
function appContext(storyFn) {
    return (<components_1.AppContext translate={translate}>
      <div style={{
        '--x-default-color': 'var(--x-color-canvas)',
        '--x-default-color-subdued': 'var(--x-color-canvas-subdued)',
        '--x-default-color-text-subdued': 'var(--x-color-canvas-text-subdued)',
        '--x-default-color-text-emphasized': 'var(--x-color-canvas-text-emphasized)',
        '--x-default-color-border': 'var(--x-color-canvas-border)',
        background: 'var(--x-color-canvas)',
        color: 'var(--x-default-color-text)',
        fontSize: 'var(--x-typography-size-default)',
        fontFamily: 'var(--x-typography-primary-fonts)',
        fontWeight: 'var(--x-typography-primary-weight-base)',
        lineHeight: 'var(--x-global-typography-line-size-default)',
        textTransform: 'var(--x-global-typography-letter-case)',
    }}>
        {storyFn()}
        <components_1.PortalHost />
      </div>
    </components_1.AppContext>);
}
exports.appContext = appContext;