"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpanderTest = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var experimental_expander_1 = require("@fluentui-react-native/experimental-expander");
var stack_1 = require("@fluentui-react-native/stack");
var consts_1 = require("./consts");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
var CustomizedExpander = experimental_expander_1.Expander.customize({
    headerBackground: '#9c9c9c',
    headerForeground: '#ffffff',
    contentBackground: '#c3c3c3',
    chevronBackground: '#ff7f7f',
    chevronForeground: '#ffffff',
    chevronPointerOverBackground: '#b5ffb2',
    chevronPointerOverForeground: '#bfbdbd',
    chevronPressedBackground: '#ffb2f4',
    chevronPressedForeground: '#912a2a',
    headerForegroundPointerOver: '#27f238',
    headerForegroundPressed: '#f227eb',
    headerBorderBrush: '#f22727',
    headerBorderPointerOverBrush: '#27f238',
    headerBorderPressedBrush: '#f227eb',
    contentBorderBrush: '#f227eb',
    headerBorderThickness: 2,
    chevronBorderBrush: '#f22727',
    chevronBorderPointerOverBrush: '#27f238',
    chevronBorderPressedBrush: '#f227eb',
    chevronBorderThickness: 2,
});
var ExpanderMainTest = function () {
    /** This test page has not yet been tested and does not currently build because
     * the react-native-test-app does not yet support WinUI 2.6
     * Filed issue in react-native-test-app: https://github.com/microsoft/react-native-test-app/issues/444
     */
    var _a = React.useState(false), switchValue = _a[0], setSwitchValue = _a[1];
    var _b = React.useState('Initial state'), expanderText = _b[0], setExpanderText = _b[1];
    var onExpanding = function () {
        setExpanderText('Expanding event changed title');
    };
    var onCollapsing = function () {
        setExpanderText('Collapsing event changed title');
    };
    return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        React.createElement(react_native_2.Text, null, "expanded=true, expandDirection=up, and event functionality"),
        React.createElement(experimental_expander_1.Expander, { collapsedHeight: 50, expandedHeight: 100, expanded: true, expandDirection: "up", onCollapsing: onExpanding, onExpanding: onCollapsing },
            React.createElement(react_native_2.Text, null, expanderText),
            React.createElement(react_native_2.Text, null, "Text in the content")),
        React.createElement(react_native_2.Text, null, "enabled = false"),
        React.createElement(experimental_expander_1.Expander, { collapsedHeight: 50, expandedHeight: 100, enabled: false },
            React.createElement(react_native_2.Text, null, "User cannot interact with this control"),
            React.createElement(react_native_2.Text, null, "Content that you should not see")),
        React.createElement(react_native_2.Text, null, "Multiple components in header and content"),
        React.createElement(experimental_expander_1.Expander, { collapsedHeight: 64, expandedHeight: 150 },
            React.createElement(react_native_1.View, { style: { flexDirection: 'row', width: 200, height: 62 } },
                React.createElement(react_native_1.View, { style: { alignSelf: 'center' } },
                    React.createElement(react_native_2.Text, null, "Line one"),
                    React.createElement(react_native_2.Text, null, "Line two")),
                React.createElement(react_native_1.Switch, { style: { marginLeft: 'auto', marginTop: 12 }, value: switchValue, onValueChange: setSwitchValue })),
            React.createElement(react_native_1.View, null,
                React.createElement(react_native_2.Text, null, "First line of text"),
                React.createElement(react_native_2.Text, null, "Second line of text"))),
        React.createElement(react_native_2.Text, null, "Customized Expander"),
        React.createElement(CustomizedExpander, { collapsedHeight: 50, expandedHeight: 100 },
            React.createElement(react_native_2.Text, null, "Text in the header"),
            React.createElement(react_native_2.Text, null, "Text in the content"))));
};
var BasicExpander = function () {
    return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.root },
            React.createElement(experimental_expander_1.Expander, { collapsedHeight: 50, expandedHeight: 100 },
                React.createElement(react_native_2.Text, null, "Text in the header"),
                React.createElement(react_native_2.Text, null, "Text in the content")))));
};
var expanderSections = [
    {
        name: 'BaseExpander',
        testID: consts_1.EXPANDER_TESTPAGE,
        component: BasicExpander,
    },
    {
        name: 'Expander',
        testID: consts_1.EXPANDER_TESTPAGE,
        component: ExpanderMainTest,
    },
];
var ExpanderTest = function () {
    var status = {
        win32Status: 'Backlog',
        uwpStatus: 'Experimental',
        iosStatus: 'Backlog',
        macosStatus: 'Backlog',
        androidStatus: 'Backlog',
    };
    var description = 'Expander is a content control that displays components in the header and content. The control has an expanded and collapsed size. Expander is a native control implemented with WinUI 2.6 Expander.';
    return React.createElement(Test_1.Test, { name: "Expander Test", description: description, sections: expanderSections, status: status });
};
exports.ExpanderTest = ExpanderTest;
//# sourceMappingURL=ExpanderTest.js.map