"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NativeDatePickerTest = 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 button_1 = require("@fluentui-react-native/button");
var experimental_native_date_picker_1 = require("@fluentui-react-native/experimental-native-date-picker");
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 NativeDatePickerMainTest = 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(experimental_native_date_picker_1.NativeDatePicker.parseISOString(pickedStartDate));
        setEndDate(experimental_native_date_picker_1.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_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 === null || startDate === void 0 ? void 0 :
            startDate.toString(),
            " ",
            '\n'),
        React.createElement(react_native_2.Text, { variant: "headerStandard" }, "Selected End Date/Time"),
        React.createElement(react_native_2.Text, { variant: "subheaderStandard" }, (_a = endDate === null || endDate === void 0 ? void 0 : endDate.toString()) !== null && _a !== void 0 ? _a : 'N/A',
            " ",
            '\n'),
        React.createElement(button_1.Button, { content: "Date picker", onClick: function () {
                return experimental_native_date_picker_1.NativeDatePicker.present({
                    referenceStartDate: referenceStartDate,
                    referenceEndDate: referenceEndDate,
                    callback: didPickDates,
                });
            } }),
        React.createElement(button_1.Button, { content: "Date time picker", onClick: function () {
                return experimental_native_date_picker_1.NativeDatePicker.present({
                    mode: 'dateTime',
                    referenceStartDate: referenceStartDate,
                    referenceEndDate: referenceEndDate,
                    callback: didPickDates,
                });
            } }),
        React.createElement(button_1.Button, { content: "Preselected date", onClick: function () {
                return 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: function () {
                return 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: function () {
                return 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: function () {
                return experimental_native_date_picker_1.NativeDatePicker.present(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, fixedDates), { referenceStartDate: referenceStartDate, referenceEndDate: referenceEndDate }), titles), { callback: didPickDates }));
            } }),
        React.createElement(button_1.Button, { content: "Date time with custom titles", onClick: function () {
                return experimental_native_date_picker_1.NativeDatePicker.present(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ mode: 'dateTime' }, fixedDates), { referenceStartDate: referenceStartDate, referenceEndDate: referenceEndDate }), titles), { callback: didPickDates }));
            } }),
        React.createElement(button_1.Button, { content: "Date range with custom titles (paged)", onClick: function () {
                return experimental_native_date_picker_1.NativeDatePicker.present(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ 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: function () {
                return experimental_native_date_picker_1.NativeDatePicker.present(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ mode: 'dateRange' }, fixedDates), { referenceStartDate: referenceStartDate, referenceEndDate: referenceEndDate }), titles), { callback: didPickDates }));
            } }),
        React.createElement(button_1.Button, { content: "Date time range with custom titles (tabbed)", onClick: function () {
                return experimental_native_date_picker_1.NativeDatePicker.present(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ 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: function (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())));
};
var nativeDatePickerSections = [
    {
        name: 'Native Date Picker',
        testID: consts_1.NATIVEDATEPICKER_TESTPAGE,
        component: NativeDatePickerMainTest,
    },
];
var NativeDatePickerTest = function () {
    var status = {
        win32Status: 'N/A',
        uwpStatus: 'N/A',
        iosStatus: 'Experimental',
        macosStatus: 'N/A',
        androidStatus: 'N/A',
    };
    var description = 'A Native date picker component using the Fluent Design System.  Currently only implemented on iOS.';
    return React.createElement(Test_1.Test, { name: "Native Date Picker Test", description: description, sections: nativeDatePickerSections, status: status });
};
exports.NativeDatePickerTest = NativeDatePickerTest;
//# sourceMappingURL=NativeDatePickerTest.js.map