import { __assign, __spreadArray } from "tslib";
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';
var NativeDatePickerAndroidUsage = function () {
    var _a;
    var today = new Date();
    var _b = React.useState(today), startDate = _b[0], setStartDate = _b[1];
    var _c = React.useState(today), endDate = _c[0], setEndDate = _c[1];
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Text, { variant: "headerStandard" }, "Selected Start Date/Time"),
        React.createElement(Text, { variant: "subheaderStandard" }, startDate === null || startDate === void 0 ? void 0 :
            startDate.toString(),
            " ",
            '\n'),
        React.createElement(Text, { variant: "headerStandard" }, "Selected End Date/Time"),
        React.createElement(Text, { variant: "subheaderStandard" }, (_a = endDate === null || endDate === void 0 ? void 0 : endDate.toString()) !== null && _a !== void 0 ? _a : 'N/A',
            " ",
            '\n'),
        React.createElement(Button, { content: "Date Picker", onClick: function () {
                NativeDatePicker.present({
                    mode: 'date',
                    startDate: startDate,
                    endDate: endDate,
                    callback: function (date1, date2) {
                        console.warn("".concat(date1, " - ").concat(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: function () {
                    NativeDatePicker.present({
                        mode: 'dateRange',
                        dateRangeMode: 'start',
                        startDate: startDate,
                        endDate: endDate,
                        callback: function (date1, date2) {
                            console.warn("".concat(date1, " - ").concat(date2));
                            setStartDate(NativeDatePicker.parseISOString(date1));
                            setEndDate(NativeDatePicker.parseISOString(date2));
                        },
                    });
                } }),
            React.createElement(Button, { content: "End Date", onClick: function () {
                    NativeDatePicker.present({
                        mode: 'dateRange',
                        dateRangeMode: 'end',
                        startDate: startDate,
                        endDate: endDate,
                        callback: function (date1, date2) {
                            console.warn("".concat(date1, " - ").concat(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: function () {
                NativeDatePicker.present({
                    mode: 'dateTime',
                    startDate: startDate,
                    endDate: endDate,
                    callback: function (date1, date2) {
                        console.warn("".concat(date1, " - ").concat(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: function () {
                    NativeDatePicker.present({
                        mode: 'dateTimeRange',
                        dateRangeMode: 'start',
                        startDate: startDate,
                        endDate: endDate,
                        callback: function (date1, date2) {
                            console.warn("".concat(date1, " - ").concat(date2));
                            setStartDate(NativeDatePicker.parseISOString(date1));
                            setEndDate(NativeDatePicker.parseISOString(date2));
                        },
                    });
                } }))));
};
var NativeDatePickeriOSUsage = function () {
    var _a;
    var _b = React.useState(new Date()), startDate = _b[0], setStartDate = _b[1];
    var _c = React.useState(null), endDate = _c[0], setEndDate = _c[1];
    var _d = React.useState(false), customCalendarConfiguration = _d[0], setCustomCalendarConfiguration = _d[1];
    function didPickDates(pickedStartDate, pickedEndDate) {
        setStartDate(NativeDatePicker.parseISOString(pickedStartDate));
        setEndDate(NativeDatePicker.parseISOString(pickedEndDate));
    }
    var today = new Date();
    // Here we set up some common options and use the spread operator to copy them repeatedly into examples.
    var fixedDates = {
        startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7),
        endDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 14),
    };
    var customReferenceStartDate = today;
    var customReferenceEndDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
    var defaultReferenceStartDate = new Date(today.getFullYear() - 3, 1, 1);
    var defaultReferenceEndDate = new Date(defaultReferenceStartDate.getFullYear() + 10, 1, 1);
    var referenceStartDate = customCalendarConfiguration ? customReferenceStartDate : defaultReferenceStartDate;
    var referenceEndDate = customCalendarConfiguration ? customReferenceEndDate : defaultReferenceEndDate;
    var 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 === null || startDate === void 0 ? void 0 :
            startDate.toString(),
            " ",
            '\n'),
        React.createElement(Text, { variant: "headerStandard" }, "Selected End Date/Time"),
        React.createElement(Text, { variant: "subheaderStandard" }, (_a = endDate === null || endDate === void 0 ? void 0 : endDate.toString()) !== null && _a !== void 0 ? _a : 'N/A',
            " ",
            '\n'),
        React.createElement(Button, { content: "Date picker", onClick: function () {
                return NativeDatePicker.present({
                    referenceStartDate: referenceStartDate,
                    referenceEndDate: referenceEndDate,
                    callback: didPickDates,
                });
            } }),
        React.createElement(Button, { content: "Date time picker", onClick: function () {
                return NativeDatePicker.present({
                    mode: 'dateTime',
                    referenceStartDate: referenceStartDate,
                    referenceEndDate: referenceEndDate,
                    callback: didPickDates,
                });
            } }),
        React.createElement(Button, { content: "Preselected date", onClick: function () {
                return NativeDatePicker.present({
                    startDate: fixedDates.startDate,
                    referenceStartDate: referenceStartDate,
                    referenceEndDate: referenceEndDate,
                    callback: didPickDates,
                });
            } }),
        React.createElement(Button, { content: "Date range (tabbed)", onClick: function () {
                return NativeDatePicker.present({
                    mode: 'dateRange',
                    referenceStartDate: referenceStartDate,
                    referenceEndDate: referenceEndDate,
                    callback: didPickDates,
                });
            } }),
        React.createElement(Button, { content: "Date range (tabbed) remembering last selection", onClick: function () {
                return NativeDatePicker.present({
                    mode: 'dateRange',
                    startDate: startDate,
                    endDate: endDate,
                    referenceStartDate: referenceStartDate,
                    referenceEndDate: referenceEndDate,
                    callback: didPickDates,
                });
            } }),
        React.createElement(Button, { content: "Date with custom titles", onClick: function () {
                return NativeDatePicker.present(__assign(__assign(__assign(__assign({}, fixedDates), { referenceStartDate: referenceStartDate, referenceEndDate: referenceEndDate }), titles), { callback: didPickDates }));
            } }),
        React.createElement(Button, { content: "Date time with custom titles", onClick: function () {
                return NativeDatePicker.present(__assign(__assign(__assign(__assign({ mode: 'dateTime' }, fixedDates), { referenceStartDate: referenceStartDate, referenceEndDate: referenceEndDate }), titles), { callback: didPickDates }));
            } }),
        React.createElement(Button, { content: "Date range with custom titles (paged)", onClick: function () {
                return NativeDatePicker.present(__assign(__assign(__assign(__assign({ mode: 'dateRange', dateRangePresentation: 'paged' }, fixedDates), { referenceStartDate: referenceStartDate, referenceEndDate: referenceEndDate }), titles), { callback: didPickDates }));
            } }),
        React.createElement(Button, { content: "Date range with custom titles (tabbed)", onClick: function () {
                return NativeDatePicker.present(__assign(__assign(__assign(__assign({ mode: 'dateRange' }, fixedDates), { referenceStartDate: referenceStartDate, referenceEndDate: referenceEndDate }), titles), { callback: didPickDates }));
            } }),
        React.createElement(Button, { content: "Date time range with custom titles (tabbed)", onClick: function () {
                return NativeDatePicker.present(__assign(__assign(__assign(__assign({ 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: function (value) {
                    setCustomCalendarConfiguration(value);
                } })),
        React.createElement(Text, { variant: "subheaderStandard" },
            "Reference start date: ",
            customReferenceStartDate.toDateString()),
        React.createElement(Text, { variant: "subheaderStandard" },
            "Reference end date: ",
            customReferenceEndDate.toDateString())));
};
var nativeDatePickerSections = __spreadArray([], Platform.select({
    android: [
        {
            name: 'Native Date Picker',
            component: NativeDatePickerAndroidUsage,
        },
    ],
    default: [
        {
            name: 'Native Date Picker',
            testID: NATIVEDATEPICKER_TESTPAGE,
            component: NativeDatePickeriOSUsage,
        },
    ],
}), true);
export var NativeDatePickerTest = function () {
    var status = {
        win32Status: 'N/A',
        uwpStatus: 'N/A',
        iosStatus: 'Experimental',
        macosStatus: 'N/A',
        androidStatus: 'Experimental',
    };
    var 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