import * as React from 'react';
import { Tabs } from '../../../../components/Tabs';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import Input from '../../../../components/Input';
import { CheckBox } from '../../../../components/CheckBox';
import { Select } from '../../../../components/Select';
import { Box } from '../../../../components/Flex';
const MESSAGE_TYPES = ['Success', 'Info', 'Warning', 'Error'];
export const ScheduleSettingsReminder = (props) => {
    const messageTypes = MESSAGE_TYPES.map((messageType) => ({
        label: messageType,
        value: messageType,
        onClick: () => {
            props.onChange({
                ...props.reminderSchedule,
                MessageType: messageType,
            });
        },
    }));
    const handleNameChange = (event) => {
        props.onChange({
            ...props.reminderSchedule,
            Name: event.target.value,
        });
    };
    const handleHeaderChange = (event) => {
        props.onChange({
            ...props.reminderSchedule,
            Header: event.target.value,
        });
    };
    const handleMessageChange = (event) => {
        props.onChange({
            ...props.reminderSchedule,
            Message: event.target.value,
        });
    };
    const handleDisplayNotificationChange = (checked) => {
        props.onChange({
            ...props.reminderSchedule,
            DisplayNotification: checked,
        });
    };
    const handleDisplaySystemStatusChange = (checked) => {
        props.onChange({
            ...props.reminderSchedule,
            DisplaySystemStatusMessage: checked,
        });
    };
    return (React.createElement(Box, { "data-name": "schedule-settings-reminder" },
        React.createElement(Tabs, { autoFocus: false },
            React.createElement(Tabs.Tab, null, "Settings"),
            React.createElement(Tabs.Content, null,
                React.createElement(FormLayout, null,
                    React.createElement(FormRow, { label: "Name" },
                        React.createElement(Input, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Reminder Name", type: "string", value: props.reminderSchedule?.Name ?? '' })),
                    React.createElement(FormRow, { label: "" },
                        React.createElement(Box, { className: "twa:h-2" })),
                    React.createElement(FormRow, { label: "Header" },
                        React.createElement(Input, { "data-name": "header", className: "twa:w-[300px]", onChange: handleHeaderChange, placeholder: "Enter Reminder Header", type: "string", value: props.reminderSchedule?.Header })),
                    React.createElement(FormRow, { label: "Message" },
                        React.createElement(Input, { "data-name": "message", className: "twa:w-[300px]", onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: props.reminderSchedule?.Message })),
                    React.createElement(FormRow, { label: "Type" },
                        React.createElement(Box, { className: "twa:max-w-[300px]" },
                            React.createElement(Select, { "data-name": "message-type", placeholder: "Select Option", options: messageTypes, value: props.reminderSchedule?.MessageType, onChange: (value) => {
                                    props.onChange({
                                        ...props.reminderSchedule,
                                        MessageType: value,
                                    });
                                } }))),
                    React.createElement(FormRow, { label: "" },
                        React.createElement(CheckBox, { "data-name": "display-notification", checked: props.reminderSchedule?.DisplayNotification, onChange: handleDisplayNotificationChange }, "Show the Reminder as a Notification")),
                    React.createElement(FormRow, { label: "" },
                        React.createElement(CheckBox, { "data-name": "display-system-status", checked: props.reminderSchedule?.DisplaySystemStatusMessage, onChange: handleDisplaySystemStatusChange }, "Display a System Status Message")))))));
};
