import * as React from 'react';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import Input from '../../../../components/Input';
import { Select } from '../../../../components/Select';
import { Tabs } from '../../../../components/Tabs';
import { Box } from '../../../../components/Flex';
export const ScheduleSettingsReport = (props) => {
    const handleNameChange = (event) => {
        props.onChange({
            ...props.report,
            Name: event.target.value,
        });
    };
    const reportOptions = props.allReports.map((report) => ({
        label: report.Name,
        value: report.Name,
    }));
    const formatOptions = props.allFormats.map((reportFormat) => ({
        label: reportFormat,
        value: reportFormat,
        onClick: () => {
            props.onChange({
                ...props.report,
                ReportFormat: reportFormat,
            });
        },
    }));
    const destinationOptions = props.allDestinations.map((destination) => ({
        label: destination,
        value: destination,
        onClick: () => {
            props.onChange({
                ...props.report,
                ExportDestination: destination,
            });
        },
    }));
    return (React.createElement(Box, { "data-name": "schedule-settings-report" },
        React.createElement(Tabs, { autoFocus: false, className: "twa:mb-3" },
            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 Schedule Name", type: "string", value: props.report?.Name ?? '' })),
                    React.createElement(FormRow, { label: "" },
                        React.createElement(Box, { className: "twa:h-2" })),
                    React.createElement(FormRow, { label: "Export" },
                        React.createElement(Box, { className: "twa:max-w-[300px]" },
                            React.createElement(Select, { "data-name": "select-report", options: reportOptions, value: props?.report?.ReportName, placeholder: "Select Export", onChange: (value) => props.onChange({
                                    ...props.report,
                                    ReportName: value,
                                }) }))),
                    React.createElement(FormRow, { label: "Format" },
                        React.createElement(Box, { className: "twa:max-w-[300px]" },
                            React.createElement(Select, { "data-name": "select-format", options: formatOptions, value: props?.report?.ReportFormat, placeholder: "Select Format", onChange: (value) => props.onChange({
                                    ...props.report,
                                    ReportFormat: value,
                                }) }))),
                    React.createElement(FormRow, { label: "Destination" },
                        React.createElement(Box, { className: "twa:max-w-[300px]" },
                            React.createElement(Select, { "data-name": "select-destination", options: destinationOptions, value: props?.report?.ExportDestination, placeholder: "Select Format", onChange: (value) => props.onChange({
                                    ...props.report,
                                    ExportDestination: value,
                                }) }))))))));
};
