import React from 'react';
import { useTranslation } from 'react-i18next';
import { SideSheet } from '../../../../UI';
import { Field } from '../../../../utilities/form';
import { AmbientAutoComplete } from '../../../../UI/inputs/textField';
import { LayoutUnit } from '../../../../layout';
import { FormControlLabel, Switch } from '@material-ui/core';
const CALENDAR_VIEW_TYPE_OPTIONS = ['day', 'week', 'month'];
const UdpTransactionTypeCalendarViewConfigurationSidesheet = (props) => {
    var _a;
    const { initialData, isSidesheetOpen, setIsSidesheetOpen, domainFieldOptions, dateDomainFieldOptions, isCalendarViewEnabled, handleCalendarViewEnabledChange } = props;
    const { t } = useTranslation();
    const calendarViewConfiguration = (_a = initialData === null || initialData === void 0 ? void 0 : initialData.pageConfiguration) === null || _a === void 0 ? void 0 : _a.calendarViewConfiguration;
    return (React.createElement(SideSheet, { open: isSidesheetOpen, width: 600, title: t('Calendar View Configuration'), onClose: () => setIsSidesheetOpen(false) }, React.createElement(React.Fragment, null, React.createElement(LayoutUnit, { unit: "nudge" }), React.createElement(FormControlLabel, { control: React.createElement(Field, { component: Switch, id: "calendarViewEnabled", name: "calendarViewEnabled", type: "checkbox", initialValue: !!(calendarViewConfiguration === null || calendarViewConfiguration === void 0 ? void 0 : calendarViewConfiguration.enabled), onChange: handleCalendarViewEnabledChange }), label: t('Enable Calendar View') }), React.createElement(LayoutUnit, { unit: "nudge" }), isCalendarViewEnabled && (React.createElement(FormControlLabel, { control: React.createElement(Field, { component: Switch, id: "isDefaultView", name: "isDefaultView", type: "checkbox", initialValue: !!(calendarViewConfiguration === null || calendarViewConfiguration === void 0 ? void 0 : calendarViewConfiguration.isDefaultView) }), label: t('Default to Calendar View') })), isCalendarViewEnabled && React.createElement(LayoutUnit, { unit: "nudge" }), isCalendarViewEnabled && (React.createElement(Field, { component: AmbientAutoComplete, label: t('Default View'), id: "defaultCalendarViewType", name: "defaultCalendarViewType", variant: "outlined", isMultiple: false, disableCloseOnSelect: false, options: CALENDAR_VIEW_TYPE_OPTIONS, getOptionLabelFunction: (option) => option, initialValue: calendarViewConfiguration === null || calendarViewConfiguration === void 0 ? void 0 : calendarViewConfiguration.defaultCalendarViewType })), isCalendarViewEnabled && (React.createElement(Field, { component: AmbientAutoComplete, label: t('Start Date Field'), id: "domainStartDateProperty", name: "domainStartDateProperty", variant: "outlined", isMultiple: false, disableCloseOnSelect: false, options: dateDomainFieldOptions || [], getOptionLabelFunction: (option) => option, initialValue: (calendarViewConfiguration === null || calendarViewConfiguration === void 0 ? void 0 : calendarViewConfiguration.domainStartDateProperty) || '' })), isCalendarViewEnabled && (React.createElement(Field, { component: AmbientAutoComplete, label: t('End Date Field'), id: "domainEndDateProperty", name: "domainEndDateProperty", variant: "outlined", isMultiple: false, disableCloseOnSelect: false, options: dateDomainFieldOptions || [], getOptionLabelFunction: (option) => option, initialValue: (calendarViewConfiguration === null || calendarViewConfiguration === void 0 ? void 0 : calendarViewConfiguration.domainEndDateProperty) || '' })), isCalendarViewEnabled && (React.createElement(Field, { component: AmbientAutoComplete, label: t('Property to Display'), id: "domainPropertyToDisplay", name: "domainPropertyToDisplay", variant: "outlined", isMultiple: false, disableCloseOnSelect: false, options: domainFieldOptions || [], getOptionLabelFunction: (option) => option, initialValue: (calendarViewConfiguration === null || calendarViewConfiguration === void 0 ? void 0 : calendarViewConfiguration.domainPropertyToDisplay) || '' })))));
};
export default UdpTransactionTypeCalendarViewConfigurationSidesheet;
//# sourceMappingURL=UdpTransactionTypeCalendarViewConfigurationSidesheet.js.map