var _a;
import { __spreadArrays } from "tslib";
import * as React from 'react';
import { ComboBox, SelectableOptionMenuItemType, Stack, } from '@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 = __spreadArrays([
    { key: 'header1', text: 'Theme fonts', itemType: SelectableOptionMenuItemType.Header }
], fonts.map(function (fontName) { return ({ key: fontName, text: fontName }); }), [
    { key: 'divider', text: '-', itemType: SelectableOptionMenuItemType.Divider },
    { key: 'header2', text: 'Other options', itemType: SelectableOptionMenuItemType.Header },
]);
var onRenderOption = function (item) {
    switch (item.itemType) {
        case SelectableOptionMenuItemType.Header:
        case 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 };
export var ComboBoxCustomStyledExample = function () {
    return (React.createElement(Stack, { tokens: stackTokens },
        React.createElement(ComboBox, { defaultSelectedKey: "Calibri", label: "Custom styled ComboBox", options: optionsWithCustomStyling, styles: customStyles }),
        React.createElement(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 })));
};
//# sourceMappingURL=ComboBox.CustomStyled.Example.js.map