"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NativeDatePickerTest = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const button_1 = require("@fluentui-react-native/button");
const experimental_native_date_picker_1 = require("@fluentui-react-native/experimental-native-date-picker");
const stack_1 = require("@fluentui-react-native/stack");
const consts_1 = require("./consts");
const styles_1 = require("../Common/styles");
const Test_1 = require("../Test");
const NativeDatePickerAndroidUsage = () => {
    const today = new Date();
    const [startDate, setStartDate] = React.useState(today);
    const [endDate, setEndDate] = React.useState(today);
    return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        React.createElement(react_native_2.Text, { variant: "headerStandard" }, "Selected Start Date/Time"),
        React.createElement(react_native_2.Text, { variant: "subheaderStandard" },
            startDate?.toString(),
            " ",
            '\n'),
        React.createElement(react_native_2.Text, { variant: "headerStandard" }, "Selected End Date/Time"),
        React.createElement(react_native_2.Text, { variant: "subheaderStandard" },
            endDate?.toString() ?? 'N/A',
            " ",
            '\n'),
        React.createElement(button_1.Button, { content: "Date Picker", onClick: () => {
                experimental_native_date_picker_1.NativeDatePicker.present({
                    mode: 'date',
                    startDate: startDate,
                    endDate: endDate,
                    callback: (date1, date2) => {
                        console.warn(`${date1} - ${date2}`);
                        setStartDate(experimental_native_date_picker_1.NativeDatePicker.parseISOString(date1));
                    },
                });
            } }),
        React.createElement(react_native_2.Text, { variant: "headerStandard" }, "Ranged Datepicker"),
        React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
            React.createElement(button_1.Button, { content: "Start Date", onClick: () => {
                    experimental_native_date_picker_1.NativeDatePicker.present({
                        mode: 'dateRange',
                        dateRangeMode: 'start',
                        startDate: startDate,
                        endDate: endDate,
                        callback: (date1, date2) => {
                            console.warn(`${date1} - ${date2}`);
                            setStartDate(experimental_native_date_picker_1.NativeDatePicker.parseISOString(date1));
                            setEndDate(experimental_native_date_picker_1.NativeDatePicker.parseISOString(date2));
                        },
                    });
                } }),
            React.createElement(button_1.Button, { content: "End Date", onClick: () => {
                    experimental_native_date_picker_1.NativeDatePicker.present({
                        mode: 'dateRange',
                        dateRangeMode: 'end',
                        startDate: startDate,
                        endDate: endDate,
                        callback: (date1, date2) => {
                            console.warn(`${date1} - ${date2}`);
                            setStartDate(experimental_native_date_picker_1.NativeDatePicker.parseISOString(date1));
                            setEndDate(experimental_native_date_picker_1.NativeDatePicker.parseISOString(date2));
                        },
                    });
                } })),
        React.createElement(react_native_2.Text, { variant: "headerStandard" }, "Date and Time"),
        React.createElement(button_1.Button, { content: "Date Time Picker", onClick: () => {
                experimental_native_date_picker_1.NativeDatePicker.present({
                    mode: 'dateTime',
                    startDate: startDate,
                    endDate: endDate,
                    callback: (date1, date2) => {
                        console.warn(`${date1} - ${date2}`);
                        setStartDate(experimental_native_date_picker_1.NativeDatePicker.parseISOString(date1));
                    },
                });
            } }),
        React.createElement(react_native_2.Text, { variant: "headerStandard" }, "Ranged Date Time Picker"),
        React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
            React.createElement(button_1.Button, { content: "Date Time Range", onClick: () => {
                    experimental_native_date_picker_1.NativeDatePicker.present({
                        mode: 'dateTimeRange',
                        dateRangeMode: 'start',
                        startDate: startDate,
                        endDate: endDate,
                        callback: (date1, date2) => {
                            console.warn(`${date1} - ${date2}`);
                            setStartDate(experimental_native_date_picker_1.NativeDatePicker.parseISOString(date1));
                            setEndDate(experimental_native_date_picker_1.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(experimental_native_date_picker_1.NativeDatePicker.parseISOString(pickedStartDate));
        setEndDate(experimental_native_date_picker_1.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_1.Stack, { style: styles_1.stackStyle },
        React.createElement(react_native_2.Text, { variant: "headerStandard" }, "Selected Start Date/Time"),
        React.createElement(react_native_2.Text, { variant: "subheaderStandard" },
            startDate?.toString(),
            " ",
            '\n'),
        React.createElement(react_native_2.Text, { variant: "headerStandard" }, "Selected End Date/Time"),
        React.createElement(react_native_2.Text, { variant: "subheaderStandard" },
            endDate?.toString() ?? 'N/A',
            " ",
            '\n'),
        React.createElement(button_1.Button, { content: "Date picker", onClick: () => experimental_native_date_picker_1.NativeDatePicker.present({
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                callback: didPickDates,
            }) }),
        React.createElement(button_1.Button, { content: "Date time picker", onClick: () => experimental_native_date_picker_1.NativeDatePicker.present({
                mode: 'dateTime',
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                callback: didPickDates,
            }) }),
        React.createElement(button_1.Button, { content: "Preselected date", onClick: () => experimental_native_date_picker_1.NativeDatePicker.present({
                startDate: fixedDates.startDate,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                callback: didPickDates,
            }) }),
        React.createElement(button_1.Button, { content: "Date range (tabbed)", onClick: () => experimental_native_date_picker_1.NativeDatePicker.present({
                mode: 'dateRange',
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                callback: didPickDates,
            }) }),
        React.createElement(button_1.Button, { content: "Date range (tabbed) remembering last selection", onClick: () => experimental_native_date_picker_1.NativeDatePicker.present({
                mode: 'dateRange',
                startDate: startDate,
                endDate: endDate,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                callback: didPickDates,
            }) }),
        React.createElement(button_1.Button, { content: "Date with custom titles", onClick: () => experimental_native_date_picker_1.NativeDatePicker.present({
                ...fixedDates,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                ...titles,
                callback: didPickDates,
            }) }),
        React.createElement(button_1.Button, { content: "Date time with custom titles", onClick: () => experimental_native_date_picker_1.NativeDatePicker.present({
                mode: 'dateTime',
                ...fixedDates,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                ...titles,
                callback: didPickDates,
            }) }),
        React.createElement(button_1.Button, { content: "Date range with custom titles (paged)", onClick: () => experimental_native_date_picker_1.NativeDatePicker.present({
                mode: 'dateRange',
                dateRangePresentation: 'paged',
                ...fixedDates,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                ...titles,
                callback: didPickDates,
            }) }),
        React.createElement(button_1.Button, { content: "Date range with custom titles (tabbed)", onClick: () => experimental_native_date_picker_1.NativeDatePicker.present({
                mode: 'dateRange',
                ...fixedDates,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                ...titles,
                callback: didPickDates,
            }) }),
        React.createElement(button_1.Button, { content: "Date time range with custom titles (tabbed)", onClick: () => experimental_native_date_picker_1.NativeDatePicker.present({
                mode: 'dateTimeRange',
                ...fixedDates,
                referenceStartDate: referenceStartDate,
                referenceEndDate: referenceEndDate,
                ...titles,
                callback: didPickDates,
            }) }),
        React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.switch },
            React.createElement(react_native_2.Text, { variant: "headerStandard" }, "Custom calendar configuration"),
            React.createElement(react_native_1.Switch, { value: customCalendarConfiguration, onValueChange: (value) => {
                    setCustomCalendarConfiguration(value);
                } })),
        React.createElement(react_native_2.Text, { variant: "subheaderStandard" },
            "Reference start date: ",
            customReferenceStartDate.toDateString()),
        React.createElement(react_native_2.Text, { variant: "subheaderStandard" },
            "Reference end date: ",
            customReferenceEndDate.toDateString())));
};
const nativeDatePickerSections = [
    ...react_native_1.Platform.select({
        android: [
            {
                name: 'Native Date Picker',
                component: NativeDatePickerAndroidUsage,
            },
        ],
        default: [
            {
                name: 'Native Date Picker',
                testID: consts_1.NATIVEDATEPICKER_TESTPAGE,
                component: NativeDatePickeriOSUsage,
            },
        ],
    }),
];
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_1.Test, { name: "Native Date Picker Test", description: description, sections: nativeDatePickerSections, status: status });
};
exports.NativeDatePickerTest = NativeDatePickerTest;
//# sourceMappingURL=NativeDatePickerTest.js.map