/**
 * Copyright (c) Microsoft Corporation.
 * Licensed under the MIT License.
 * @format
 */
'use strict';
Object.defineProperty(exports, "__esModule", { value: true });
exports.FluentTesterApp = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var experimental_appearance_additions_1 = require("@fluentui-react-native/experimental-appearance-additions");
var theme_1 = require("@fluentui-react-native/theme");
var FluentTester_1 = require("./FluentTester");
var index_1 = require("./theme/index");
var FluentTesterApp = function (props) {
    var sizeClass = (0, experimental_appearance_additions_1.useHorizontalSizeClass)();
    var isMobile = react_native_1.Platform.OS === 'android' || (react_native_1.Platform.OS === 'ios' && react_native_1.Platform.isPad === false);
    // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
    var shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');
    var customTheme = new theme_1.ThemeReference(index_1.testerTheme, function () {
        return {
            colors: { brandBackground2: 'red' }, // Overrides the buttonBackground color token, all other colors are kept in-tact.
        };
    }, function () {
        return {
            colors: {
                hostColorPink: 'pink',
                hostColorBrandText: 'purple',
                hostColorButtonBackground: 'yellow', // New custom color key.
            },
            spacing: {
                s1: '10px',
            },
        };
    }, function () {
        // Any other recipe.
        return {
            colors: {
                yellowBrandColor: 'yellow',
                hostColorButtonBackground: 'green', // Overrides custom color key 'hostColorButtonBackground' - it is green in theme now.
            },
        };
    });
    // Use the custom colors for Android and iOS.
    var fluentTesterTheme = isMobile ? customTheme : index_1.testerTheme;
    return (React.createElement(theme_1.ThemeProvider, { theme: fluentTesterTheme },
        React.createElement(FluentTester_1.FluentTester, tslib_1.__assign({ enableSinglePaneView: shouldShowSinglePane }, props))));
};
exports.FluentTesterApp = FluentTesterApp;
//# sourceMappingURL=FluentTesterApp.js.map