import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { formatTimeZone, parseDateTimePickerValue, serializeDateTimePickerValue, } from '../../../lib/dates.js';
import { ChevronRightIcon } from '../../../lib/icons/ChevronRight.js';
import { DateTimePicker } from '../../../lib/ui/DateTimePicker/DateTimePicker.js';
import { FormField } from '../../../lib/ui/FormField.js';
import { InputLabel } from '../../../lib/ui/InputLabel.js';
import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
export function AccessCodeFormDatePicker({ timeZone, onBack, startDate, setStartDate, endDate, setEndDate, onChangeTimeZone, }) {
    return (_jsxs("div", { className: 'seam-schedule-picker', children: [_jsx(ContentHeader, { title: t.timingTitle, onBack: onBack }), _jsxs("div", { className: 'seam-content', children: [_jsxs("div", { className: 'seam-time-zone', children: [_jsx("span", { className: 'seam-label', children: t.selectedTimeZoneLabel }), _jsxs("span", { className: 'seam-selected', onClick: onChangeTimeZone, children: [formatTimeZone(timeZone), _jsx(ChevronRightIcon, {})] })] }), _jsxs(FormField, { children: [_jsx(InputLabel, { children: t.startTimeLabel }), _jsx(DateTimePicker, { value: serializeDateTimePickerValue(startDate, timeZone) ?? '', onChange: (value) => {
                                    setStartDate(parseDateTimePickerValue(value, timeZone));
                                }, size: 'large' })] }), _jsxs(FormField, { children: [_jsx(InputLabel, { children: t.endTimeLabel }), _jsx(DateTimePicker, { value: serializeDateTimePickerValue(endDate, timeZone) ?? '', onChange: (value) => {
                                    setEndDate(parseDateTimePickerValue(value, timeZone));
                                }, size: 'large' })] })] })] }));
}
const t = {
    timingTitle: 'Timing',
    selectedTimeZoneLabel: 'All times in',
    startTimeLabel: 'Start',
    endTimeLabel: 'End',
};
//# sourceMappingURL=AccessCodeFormDatePicker.js.map