import * as React from 'react';
import { View, Switch } from 'react-native';
import { Text } from '@fluentui/react-native';
import { Expander } from '@fluentui-react-native/experimental-expander';
import { Stack } from '@fluentui-react-native/stack';
import { EXPANDER_TESTPAGE } from './consts';
import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
import { Test } from '../Test';
const CustomizedExpander = 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,
});
const ExpanderMainTest = () => {
    /** 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
     */
    const [switchValue, setSwitchValue] = React.useState(false);
    const [expanderText, setExpanderText] = React.useState('Initial state');
    const onExpanding = () => {
        setExpanderText('Expanding event changed title');
    };
    const onCollapsing = () => {
        setExpanderText('Collapsing event changed title');
    };
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Text, null, "expanded=true, expandDirection=up, and event functionality"),
        React.createElement(Expander, { collapsedHeight: 50, expandedHeight: 100, expanded: true, expandDirection: "up", onCollapsing: onExpanding, onExpanding: onCollapsing },
            React.createElement(Text, null, expanderText),
            React.createElement(Text, null, "Text in the content")),
        React.createElement(Text, null, "enabled = false"),
        React.createElement(Expander, { collapsedHeight: 50, expandedHeight: 100, enabled: false },
            React.createElement(Text, null, "User cannot interact with this control"),
            React.createElement(Text, null, "Content that you should not see")),
        React.createElement(Text, null, "Multiple components in header and content"),
        React.createElement(Expander, { collapsedHeight: 64, expandedHeight: 150 },
            React.createElement(View, { style: { flexDirection: 'row', width: 200, height: 62 } },
                React.createElement(View, { style: { alignSelf: 'center' } },
                    React.createElement(Text, null, "Line one"),
                    React.createElement(Text, null, "Line two")),
                React.createElement(Switch, { style: { marginLeft: 'auto', marginTop: 12 }, value: switchValue, onValueChange: setSwitchValue })),
            React.createElement(View, null,
                React.createElement(Text, null, "First line of text"),
                React.createElement(Text, null, "Second line of text"))),
        React.createElement(Text, null, "Customized Expander"),
        React.createElement(CustomizedExpander, { collapsedHeight: 50, expandedHeight: 100 },
            React.createElement(Text, null, "Text in the header"),
            React.createElement(Text, null, "Text in the content"))));
};
const BasicExpander = () => {
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(View, { style: commonStyles.root },
            React.createElement(Expander, { collapsedHeight: 50, expandedHeight: 100 },
                React.createElement(Text, null, "Text in the header"),
                React.createElement(Text, null, "Text in the content")))));
};
const expanderSections = [
    {
        name: 'BaseExpander',
        testID: EXPANDER_TESTPAGE,
        component: BasicExpander,
    },
    {
        name: 'Expander',
        testID: EXPANDER_TESTPAGE,
        component: ExpanderMainTest,
    },
];
export const ExpanderTest = () => {
    const status = {
        win32Status: 'Backlog',
        uwpStatus: 'Experimental',
        iosStatus: 'Backlog',
        macosStatus: 'Backlog',
        androidStatus: 'Backlog',
    };
    const 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, { name: "Expander Test", description: description, sections: expanderSections, status: status });
};
//# sourceMappingURL=ExpanderTest.js.map