"use strict";
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComboBoxCustomStyledExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("@fluentui/react");
var fontMapping = (_a = {},
    _a['Arial Black'] = '"Arial Black", "Arial Black_MSFontService", sans-serif',
    _a['Times New Roman'] = '"Times New Roman", "Times New Roman_MSFontService", serif',
    _a['Comic Sans MS'] = '"Comic Sans MS", "Comic Sans MS_MSFontService", fantasy',
    _a['Calibri'] = 'Calibri, Calibri_MSFontService, sans-serif',
    _a);
var fonts = Object.keys(fontMapping);
var customStyles = {
    // Note that this is actually the wrapper of the input and caret (doesn't include the label)
    root: {
        maxWidth: '300px',
        backgroundColor: '#b4a0ff',
    },
    input: {
        backgroundColor: '#b4a0ff',
    },
};
var optionsWithCustomStyling = fonts.map(function (fontName) { return ({
    key: fontName,
    text: fontName,
    styles: {
        optionText: {
            fontFamily: fontMapping[fontName],
        },
    },
}); });
var optionsForCustomRender = tslib_1.__spreadArrays([
    { key: 'header1', text: 'Theme fonts', itemType: react_1.SelectableOptionMenuItemType.Header }
], fonts.map(function (fontName) { return ({ key: fontName, text: fontName }); }), [
    { key: 'divider', text: '-', itemType: react_1.SelectableOptionMenuItemType.Divider },
    { key: 'header2', text: 'Other options', itemType: react_1.SelectableOptionMenuItemType.Header },
]);
var onRenderOption = function (item) {
    switch (item.itemType) {
        case react_1.SelectableOptionMenuItemType.Header:
        case react_1.SelectableOptionMenuItemType.Divider:
            return React.createElement("span", null, item.text);
        default:
            var fontFamily = fontMapping[item.text];
            if (!fontFamily) {
                var newFontName = item.text;
                fontFamily = fontMapping[newFontName] = "\"" + newFontName + "\",\"Segoe UI\",Tahoma,Sans-Serif";
            }
            return React.createElement("span", { style: { fontFamily: fontFamily } }, item.text);
    }
};
// Basic styling to make the example look nicer
var basicStyles = { root: { maxWidth: 300 } };
var stackTokens = { childrenGap: 20 };
var ComboBoxCustomStyledExample = function () {
    return (React.createElement(react_1.Stack, { tokens: stackTokens },
        React.createElement(react_1.ComboBox, { defaultSelectedKey: "Calibri", label: "Custom styled ComboBox", options: optionsWithCustomStyling, styles: customStyles }),
        React.createElement(react_1.ComboBox, { defaultSelectedKey: "Calibri", label: "ComboBox with custom option rendering (type the name of a font and the option will render in that font)", allowFreeform: true, autoComplete: "on", options: optionsForCustomRender, onRenderOption: onRenderOption, styles: basicStyles })));
};
exports.ComboBoxCustomStyledExample = ComboBoxCustomStyledExample;
//# sourceMappingURL=ComboBox.CustomStyled.Example.js.map