import * as React from 'react';
import { Platform, Switch, View } from 'react-native';
import { Text } from '@fluentui/react-native';
import { Button } from '@fluentui-react-native/button';
import { NativeDatePicker } from '@fluentui-react-native/experimental-native-date-picker';
import { Stack } from '@fluentui-react-native/stack';
import { NATIVEDATEPICKER_TESTPAGE } from './consts';
import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
import { Test } from '../Test';
const NativeDatePickerAndroidUsage = () => {
    const today = new Date();
    const [startDate, setStartDate] = React.useState(today);
    const [endDate, setEndDate] = React.useState(today);
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Text, { variant: "headerStandard" }, "Selected Start Date/Time"),
        React.createElement(Text, { variant: "subheaderStandard" },
            startDate?.toString(),
            " ",
            '\n'),
        React.createElement(Text, { variant: "headerStandard" }, "Selected End Date/Time"),
        React.createElement(Text, { variant: "subheaderStandard" },
            endDate?.toString() ?? 'N/A',
            " ",
            '\n'),
        React.createElement(Button, { content: "Date Picker", onClick: () => {
                NativeDatePicker.present({
                    mode: 'date',
                    startDate: startDate,
                    endDate: endDate,
                    callback: (date1, date2) => {
                        console.warn(`${date1} - ${date2}`);
                        setStartDate(NativeDatePicker.parseISOString(date1));
                    },
                });
            } }),
        React.createElement(Text, { variant: "headerStandard" }, "Ranged Datepicker"),
        React.createElement(View, { style: { flexDirection: 'row' } },
            React.createElement(Button, { content: "Start Date", onClick: () => {
                    NativeDatePicker.present({
                        mode: 'dateRange',
                        dateRangeMode: 'start',
                        startDate: startDate,
                        endDate: endDate,
                        callback: (date1, date2) => {
                            console.warn(`${date1} - ${date2}`);
                            setStartDate(NativeDatePicker.parseISOString(date1));
                            setEndDate(NativeDatePicker.parseISOString(date2));
                        },
                    });
                } }),
            React.createElement(Button, { content: "End Date", onClick: () => {
                    NativeDatePicker.present({
                        mode: 'dateRange',
                        dateRangeMode: 'end',
                        startDate: startDate,
                        endDate: endDate,
                        callback: (date1, date2) => {
                            console.warn(`${date1} - ${date2}`);
                            setStartDate(NativeDatePicker.parseISOString(date1));
                            setEndDate(NativeDatePicker.parseISOString(date2));
                        },
                    });
                } })),
        React.createElement(Text, { variant: "headerStandard" }, "Date and Time"),
        React.createElement(Button, { content: "Date Time Picker", onClick: () => {
                NativeDatePicker.present({
                    mode: 'dateTime',
                    startDate: startDate,
                    endDate: endDate,
                    callback: (date1, date2) => {
                        console.warn(`${date1} - ${date2}`);
                        setStartDate(NativeDatePicker.parseISOString(date1));
                    },
                });
            } }),
        React.createElement(Text, { variant: "headerStandard" }, "Ranged Date Time Picker"),
        React.createElement(View, { style: { flexDirection: 'row' } },
            React.createElement(Button, { content: "Date Time Range", onClick: () => {
                    NativeDatePicker.present({
                        mode: 'dateTimeRange',
                        dateRangeMode: 'start',
                        startDate: startDate,
                        endDate: endDate,
                        callback: (date1, date2) => {
                            console.warn(`${date1} - ${date2}`);
                            setStartDate(NativeDatePicker.parseISOString(date1));
                            setEndDate(NativeDatePicker.parseISOString(date2));
                        },
                    });
                } }))));
};
const NativeDatePickeriOSUsage = () => {
    const [startDate, setStartDate] = React.useState(new Date());
    const [endDate, setEndDate] = React.useState(null);
    const [customCalendarConfiguration, setCustomCalendarConfiguration] = React.useState(false);
    function didPickDates(pickedStartDate, pickedEndDate) {
        setStartDate(NativeDatePicker.parseISOString(pickedStartDate));
        setEndDate(NativeDatePicker.parseISOString(pickedEndDate));
    }
    const today = new Date();
    // Here we set up some common options and use the spread operator to copy them repeatedly into examples.
    const fixedDates = {
        startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7),
        endDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 14),
    };
    const customReferenceStartDate = today;
    const customReferenceEndDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
    const defaultReferenceStartDate = new Date(today.getFullYear() - 3, 1, 1);
    const defaultReferenceEndDate = new Date(defaultReferenceStartDate.getFullYear() + 10, 1, 1);
    const referenceStartDate = customCalendarConfiguration ? customReferenceStartDate : defaultReferenceStartDate;
    const referenceEndDate = customCalendarConfiguration ? customReferenceEndDate : defaultReferenceEndDate;
    const titles = {
        startTitle: 'Start Title',
        startSubitle: 'Start Subtitle',
        startTab: 'Start Tab',
        endTitle: 'End Title',
        endSubtitle: 'End Subtitle',
        endTab: 'End Tab',
        dateTitle: 'Date Title',
        dateSubtitle: 'Date Subtitle',
        timeTitle: 'Time Title',
        timeSubtitle: 'Time Subtitle',
    };
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Text, { variant: "headerStandard" }, "Selected Start Date/Time"),
        React.createElement(Text, { variant: "subheaderStandard" },
            startDate?.toString(),
            " ",
            '\n'),
        React.createElement(Text, { variant: "headerStandard" }, "Selected End Date/Time"),
        React.createElement(Text, { variant: "subheaderStandard" },
            endDate?.toString() ?? 'N/A',
            " ",
            '\n'),
        React.createElement(Button, { content: "Date picker", onClick: () => NativeDatePicker.present({
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                callback: didPickDates,
            }) }),
        React.createElement(Button, { content: "Date time picker", onClick: () => NativeDatePicker.present({
                mode: 'dateTime',
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                callback: didPickDates,
            }) }),
        React.createElement(Button, { content: "Preselected date", onClick: () => NativeDatePicker.present({
                startDate: fixedDates.startDate,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                callback: didPickDates,
            }) }),
        React.createElement(Button, { content: "Date range (tabbed)", onClick: () => NativeDatePicker.present({
                mode: 'dateRange',
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                callback: didPickDates,
            }) }),
        React.createElement(Button, { content: "Date range (tabbed) remembering last selection", onClick: () => NativeDatePicker.present({
                mode: 'dateRange',
                startDate: startDate,
                endDate: endDate,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                callback: didPickDates,
            }) }),
        React.createElement(Button, { content: "Date with custom titles", onClick: () => NativeDatePicker.present({
                ...fixedDates,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                ...titles,
                callback: didPickDates,
            }) }),
        React.createElement(Button, { content: "Date time with custom titles", onClick: () => NativeDatePicker.present({
                mode: 'dateTime',
                ...fixedDates,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                ...titles,
                callback: didPickDates,
            }) }),
        React.createElement(Button, { content: "Date range with custom titles (paged)", onClick: () => NativeDatePicker.present({
                mode: 'dateRange',
                dateRangePresentation: 'paged',
                ...fixedDates,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                ...titles,
                callback: didPickDates,
            }) }),
        React.createElement(Button, { content: "Date range with custom titles (tabbed)", onClick: () => NativeDatePicker.present({
                mode: 'dateRange',
                ...fixedDates,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                ...titles,
                callback: didPickDates,
            }) }),
        React.createElement(Button, { content: "Date time range with custom titles (tabbed)", onClick: () => NativeDatePicker.present({
                mode: 'dateTimeRange',
                ...fixedDates,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                ...titles,
                callback: didPickDates,
            }) }),
        React.createElement(View, { style: commonStyles.switch },
            React.createElement(Text, { variant: "headerStandard" }, "Custom calendar configuration"),
            React.createElement(Switch, { value: customCalendarConfiguration, onValueChange: (value) => {
                    setCustomCalendarConfiguration(value);
                } })),
        React.createElement(Text, { variant: "subheaderStandard" },
            "Reference start date: ",
            customReferenceStartDate.toDateString()),
        React.createElement(Text, { variant: "subheaderStandard" },
            "Reference end date: ",
            customReferenceEndDate.toDateString())));
};
const nativeDatePickerSections = [
    ...Platform.select({
        android: [
            {
                name: 'Native Date Picker',
                component: NativeDatePickerAndroidUsage,
            },
        ],
        default: [
            {
                name: 'Native Date Picker',
                testID: NATIVEDATEPICKER_TESTPAGE,
                component: NativeDatePickeriOSUsage,
            },
        ],
    }),
];
export const NativeDatePickerTest = () => {
    const status = {
        win32Status: 'N/A',
        uwpStatus: 'N/A',
        iosStatus: 'Experimental',
        macosStatus: 'N/A',
        androidStatus: 'Experimental',
    };
    const description = 'A Native date picker component using the Fluent Design System.';
    return React.createElement(Test, { name: "Native Date Picker Test", description: description, sections: nativeDatePickerSections, status: status });
};
//# sourceMappingURL=NativeDatePickerTest.js.map