import * as React from 'react';
import { Tabs } from '../../../../components/Tabs';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import Input from '../../../../components/Input';
import Radio from '../../../../components/Radio';
import DropdownButton from '../../../../components/DropdownButton';
import { FormDescriptionText } from '../../../Wizard/OnePageAdaptableWizard';
import { Box } from '../../../../components/Flex';
export const ScheduleSettingsIPushPull = (props) => {
    const handleNameChange = (event) => {
        props.onChange({
            ...props.iPushPull,
            Name: event.target.value,
        });
    };
    const reportOptions = props.allReports.map((report) => ({
        label: report.Name,
        value: report.Name,
        onClick: () => props.onChange({
            ...props.iPushPull,
            IPushPullReport: {
                ...props.iPushPull.IPushPullReport,
                ReportName: report.Name,
            },
        }),
    }));
    const folderOptions = props.allFolders.map((folder) => ({
        label: folder.Name,
        value: folder.Name,
        onClick: () => props.onChange({
            ...props.iPushPull,
            IPushPullReport: {
                ...props.iPushPull.IPushPullReport,
                Folder: folder.Name,
            },
        }),
    }));
    const pagesOptions = props.availablePages.map((page) => ({
        label: page,
        value: page,
        onClick: () => props.onChange({
            ...props.iPushPull,
            IPushPullReport: {
                ...props.iPushPull.IPushPullReport,
                Page: page,
            },
        }),
    }));
    const handleDataTypeChange = (Transmission) => props.onChange({
        ...props.iPushPull,
        Transmission,
    });
    return (React.createElement(Box, { "data-name": "schedule-settings-ipushpull" },
        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 Schedule Name", type: "string", value: props.iPushPull?.Name ?? '' })),
                    React.createElement(FormRow, { label: "" },
                        React.createElement(Box, { className: "twa:h-2" })),
                    React.createElement(FormRow, { label: "Select Report" },
                        React.createElement(DropdownButton, { "data-name": "report-name", disabled: props.allReports.length == 0, items: reportOptions, className: "twa:w-[300px]" }, props?.iPushPull?.IPushPullReport?.ReportName || 'Select Report')),
                    React.createElement(FormRow, { label: "Select Folder" },
                        React.createElement(DropdownButton, { "data-name": "folder-name", disabled: props.allFolders.length == 0, items: folderOptions, className: "twa:w-[300px]" }, props?.iPushPull?.IPushPullReport?.Folder || 'Select Folder')),
                    React.createElement(FormRow, { label: "Select Page" },
                        React.createElement(DropdownButton, { "data-name": "page-name", disabled: props.allFolders.length == 0, items: pagesOptions, className: "twa:w-[300px]" }, props?.iPushPull?.IPushPullReport?.Page || 'Select Page')),
                    React.createElement(FormRow, { label: "Data Type" },
                        React.createElement(Radio, { "data-name": "data-type", className: "twa:mr-3", value: "Snapshot", checked: props.iPushPull.Transmission === 'Snapshot', onChange: (checked) => checked && handleDataTypeChange('Snapshot') }, "Snapshot (one off report)"),
                        React.createElement(Radio, { "data-name": "data-live", value: "Live Data", checked: props.iPushPull.Transmission === 'Live Data', onChange: (checked) => checked && handleDataTypeChange('Live Data') }, "Live Data (real-time updates)")),
                    React.createElement(FormRow, { label: "" },
                        React.createElement(FormDescriptionText, null, "Choose whether to send ipushpull Data as 'Snapshot' (One-off report) or 'Live Data' (updating as Grid updates)")))))));
};
