"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomizeUsage = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const stack_1 = require("@fluentui-react-native/stack");
const text_1 = require("@fluentui-react-native/text");
const styles_1 = require("../Common/styles");
const RedCaptionBold = text_1.TextV1.customize({ variant: 'captionStandard', fontWeight: '700', color: '#ff0000' });
const OrangeSecondaryBold = text_1.TextV1.customize({ variant: 'secondaryStandard', fontWeight: '700', color: '#ff9900' });
const YellowBodyBold = text_1.TextV1.customize({ variant: 'bodyStandard', fontWeight: '700', color: '#f3ce00' });
const GreenSubheaderBold = text_1.TextV1.customize({ variant: 'subheaderStandard', fontWeight: '700', color: '#02c440' });
const BlueHeaderBold = text_1.TextV1.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4' });
const IndigoHeroBold = text_1.TextV1.customize({ variant: 'heroStandard', fontWeight: '700', color: '#4b0082' });
const PurpleHeroLargeBold = text_1.TextV1.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
const CustomFontNames = {
    ...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',
        },
    }),
};
const ArialBlack = text_1.TextV1.customize({ variant: 'heroLargeStandard', fontFamily: 'Arial Black' });
const BrushScriptMT = text_1.TextV1.customize({ variant: 'heroStandard', fontFamily: 'Brush Script MT' });
const CourierNew = text_1.TextV1.customize({ variant: 'headerStandard', fontFamily: CustomFontNames.CourierNew });
const Georgia = text_1.TextV1.customize({ variant: 'subheaderStandard', fontFamily: CustomFontNames.Georgia });
const TimesNewRoman = text_1.TextV1.customize({ variant: 'secondaryStandard', fontFamily: CustomFontNames.TimesNewRoman });
const Wingdings = text_1.TextV1.customize({ variant: 'captionStandard', fontFamily: 'Wingdings' });
// Examples of supported Android fonts.
const Casual = text_1.TextV1.customize({ variant: 'heroStandard', fontFamily: 'casual' });
const Cursive = text_1.TextV1.customize({ variant: 'heroStandard', fontFamily: 'cursive' });
// Examples of iOS fonts.
const Papyrus = text_1.TextV1.customize({ variant: 'heroLargeStandard', fontFamily: 'Papyrus' });
const Helvetica = text_1.TextV1.customize({ variant: 'heroLargeStandard', fontFamily: 'Helvetica' });
// Fonts supported on Android and iOS
const Arial = text_1.TextV1.customize({ variant: 'heroLargeStandard', fontFamily: 'arial' });
const CustomizeUsage = () => {
    const BlockText = () => {
        return (React.createElement(React.Fragment, null,
            React.createElement(text_1.TextV1, { 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(text_1.TextV1, { 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(text_1.TextV1, { underline: true }, "Since text components are inside a View"),
            React.createElement(text_1.TextV1, null, "every block of text"),
            React.createElement(text_1.TextV1, { underline: true, strikethrough: true, align: "end" }, "gets its own line. This line has been underlined, striked through, and right aligned.")));
    };
    const NonBlockText = () => {
        return (React.createElement(text_1.TextV1, null,
            React.createElement(text_1.TextV1, { italic: true }, "I am italisized inline text."),
            React.createElement(text_1.TextV1, { weight: "medium" }, "Since text components are inside a Text, (medium) "),
            React.createElement(text_1.TextV1, { weight: "bold" }, "every block of text (bolded) "),
            React.createElement(text_1.TextV1, { size: 600 }, "gets placed inline.")));
    };
    const CustomUsageStack = () => {
        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")));
    };
    const CustomFontStack = () => {
        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")));
    };
    const CustomFontStackAndroid = () => {
        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")));
    };
    const CustomFontStackiOS = () => {
        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(text_1.TextV1, null, '\n'),
                React.createElement(NonBlockText, null),
                React.createElement(text_1.TextV1, null, '\n'),
                React.createElement(CustomUsageStack, null),
                React.createElement(CustomFontStack, null)));
    }
};
exports.CustomizeUsage = CustomizeUsage;
//# sourceMappingURL=CustomizeUsage.js.map