"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomizeUsage = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var experimental_text_1 = require("@fluentui-react-native/experimental-text");
var stack_1 = require("@fluentui-react-native/stack");
var styles_1 = require("../Common/styles");
var RedCaptionBold = experimental_text_1.Text.customize({ variant: 'captionStandard', fontWeight: '700', color: '#ff0000' });
var OrangeSecondaryBold = experimental_text_1.Text.customize({ variant: 'secondaryStandard', fontWeight: '700', color: '#ff9900' });
var YellowBodyBold = experimental_text_1.Text.customize({ variant: 'bodyStandard', fontWeight: '700', color: '#f3ce00' });
var GreenSubheaderBold = experimental_text_1.Text.customize({ variant: 'subheaderStandard', fontWeight: '700', color: '#02c440' });
var BlueHeaderBold = experimental_text_1.Text.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4' });
var IndigoHeroBold = experimental_text_1.Text.customize({ variant: 'heroStandard', fontWeight: '700', color: '#4b0082' });
var PurpleHeroLargeBold = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontWeight: '700', color: '#8402c4' });
// Android has a limited fontFamily support and unknown fonts fallback to sans-serif (Roboto).
// Custom fonts (ttf, otf) are supported but need to be linked using 'react-native link'
// The supported font families can be found as <aliases> at https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml
var CustomFontNames = tslib_1.__assign({}, react_native_1.Platform.select({
    android: {
        CourierNew: 'courier new',
        Georgia: 'georgia',
        TimesNewRoman: 'times new roman',
    },
    default: {
        CourierNew: 'Courier New',
        Georgia: 'Georgia',
        TimesNewRoman: 'Times New Roman',
    },
}));
var ArialBlack = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Arial Black' });
var BrushScriptMT = experimental_text_1.Text.customize({ variant: 'heroStandard', fontFamily: 'Brush Script MT' });
var CourierNew = experimental_text_1.Text.customize({ variant: 'headerStandard', fontFamily: CustomFontNames.CourierNew });
var Georgia = experimental_text_1.Text.customize({ variant: 'subheaderStandard', fontFamily: CustomFontNames.Georgia });
var TimesNewRoman = experimental_text_1.Text.customize({ variant: 'secondaryStandard', fontFamily: CustomFontNames.TimesNewRoman });
var Wingdings = experimental_text_1.Text.customize({ variant: 'captionStandard', fontFamily: 'Wingdings' });
// Examples of supported Android fonts.
var Casual = experimental_text_1.Text.customize({ variant: 'heroStandard', fontFamily: 'casual' });
var Cursive = experimental_text_1.Text.customize({ variant: 'heroStandard', fontFamily: 'cursive' });
// Examples of iOS fonts.
var Papyrus = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Papyrus' });
var Helvetica = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Helvetica' });
// Fonts supported on Android and iOS
var Arial = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontFamily: 'arial' });
var CustomizeUsage = function () {
    var BlockText = function () {
        return (React.createElement(React.Fragment, null,
            React.createElement(experimental_text_1.Text, { style: { textTransform: 'uppercase' }, font: "base", weight: "medium", truncate: true }, "I am going to be truncated since I am a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long block text."),
            React.createElement(experimental_text_1.Text, { font: "monospace", weight: "semibold", wrap: false }, "I am not going to be wrapped since I am a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long block text."),
            React.createElement(experimental_text_1.Text, { underline: true }, "Since text components are inside a View"),
            React.createElement(experimental_text_1.Text, null, "every block of text"),
            React.createElement(experimental_text_1.Text, { underline: true, strikethrough: true, align: "end" }, "gets its own line. This line has been underlined, striked through, and right aligned.")));
    };
    var NonBlockText = function () {
        return (React.createElement(experimental_text_1.Text, null,
            React.createElement(experimental_text_1.Text, { italic: true }, "I am italisized inline text."),
            React.createElement(experimental_text_1.Text, { weight: "medium" }, "Since text components are inside a Text, (medium) "),
            React.createElement(experimental_text_1.Text, { weight: "bold" }, "every block of text (bolded) "),
            React.createElement(experimental_text_1.Text, { size: 600 }, "gets placed inline.")));
    };
    var CustomUsageStack = function () {
        return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle, gap: 5 },
            React.createElement(RedCaptionBold, null, "RedCaptionBold"),
            React.createElement(OrangeSecondaryBold, null, "OrangeSecondaryBold"),
            React.createElement(YellowBodyBold, null, "YellowBodyBold"),
            React.createElement(GreenSubheaderBold, null, "GreenSubheaderBold"),
            React.createElement(BlueHeaderBold, null, "BlueHeaderBold"),
            React.createElement(IndigoHeroBold, null, "IndigoHeroBold"),
            React.createElement(PurpleHeroLargeBold, null, "PurpleHeroLargeBold")));
    };
    var CustomFontStack = function () {
        return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle, gap: 5 },
            React.createElement(ArialBlack, null, "Arial Black"),
            React.createElement(BrushScriptMT, null, "Brush Script MT"),
            React.createElement(CourierNew, null, "Courier New"),
            React.createElement(Georgia, null, "Georgia"),
            React.createElement(TimesNewRoman, null, "TimesNewRoman"),
            React.createElement(Wingdings, null, "Wingdings")));
    };
    var CustomFontStackAndroid = function () {
        return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle, gap: 5 },
            React.createElement(Arial, null, "Arial"),
            React.createElement(Casual, null, "Casual"),
            React.createElement(Cursive, null, "Cursive"),
            React.createElement(CourierNew, null, "Courier New"),
            React.createElement(Georgia, null, "Georgia"),
            React.createElement(TimesNewRoman, null, "TimesNewRoman")));
    };
    var CustomFontStackiOS = function () {
        return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle, gap: 5 },
            React.createElement(Arial, null, "Arial"),
            React.createElement(Papyrus, null, "Papyrus"),
            React.createElement(Helvetica, null, "Helvetica"),
            React.createElement(CourierNew, null, "Courier New"),
            React.createElement(Georgia, null, "Georgia"),
            React.createElement(TimesNewRoman, null, "TimesNewRoman")));
    };
    switch (react_native_1.Platform.OS) {
        case 'android':
            return (React.createElement(react_native_1.View, null,
                React.createElement(CustomUsageStack, null),
                React.createElement(CustomFontStackAndroid, null)));
        case 'ios':
            return (React.createElement(react_native_1.View, null,
                React.createElement(CustomUsageStack, null),
                React.createElement(CustomFontStackiOS, null)));
        default:
            return (React.createElement(react_native_1.View, null,
                React.createElement(BlockText, null),
                React.createElement(experimental_text_1.Text, null, '\n'),
                React.createElement(NonBlockText, null),
                React.createElement(experimental_text_1.Text, null, '\n'),
                React.createElement(CustomUsageStack, null),
                React.createElement(CustomFontStack, null)));
    }
};
exports.CustomizeUsage = CustomizeUsage;
//# sourceMappingURL=CustomizeUsage.js.map