import * as React from 'react';
import { Tabs } from '../../../components/Tabs';
import { AlertType, getAlertTypeText } from '../Utilities/getAlertType';
import { TypeRadio } from '../../Wizard/TypeRadio';
import { Tag } from '../../../components/Tag';
import { Flex } from '../../../components/Flex';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import Input from '../../../components/Input';
import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
export const isSettingsValid = (data, api) => {
    if (!data.Name?.trim()) {
        return 'Name is required';
    }
    const allAlerts = api.alertApi.getAlertDefinitions();
    const isDuplicateName = allAlerts.some((a) => a.Name === data.Name && a.Uuid !== data.Uuid);
    if (isDuplicateName) {
        return 'An Alert already exists with that name';
    }
    return true;
};
export const renderAlertTypeSummary = (alertType) => {
    const { data } = useOnePageAdaptableWizardContext();
    const text = getAlertTypeText(alertType);
    return (React.createElement(React.Fragment, null,
        React.createElement(SummaryText, null,
            "Name ",
            React.createElement(Tag, null, data.Name || 'Not specified')),
        React.createElement(SummaryText, null,
            "Type ",
            React.createElement(Tag, null, text))));
};
export const AlertTypeWizardSection = (props) => {
    const { data } = useOnePageAdaptableWizardContext();
    const handleNameChange = (event) => {
        props.onChange({
            ...data,
            Name: event.target.value,
        });
    };
    return (React.createElement(Flex, { flexDirection: "column" },
        React.createElement(Tabs, null,
            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": "alert-name", className: "twa:flex-1 twa:max-w-[200px] twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }))))),
        React.createElement(Tabs, { className: "twa:mt-2" },
            React.createElement(Tabs.Tab, null, "Alert Type"),
            React.createElement(Tabs.Content, null,
                React.createElement(Flex, { flexDirection: "column" },
                    React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === AlertType.DataChange, onClick: () => props.onAlertTypeChange(AlertType.DataChange) }),
                    React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === AlertType.RowChange, onClick: () => props.onAlertTypeChange(AlertType.RowChange) }),
                    React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(AlertType.Aggregation), checked: props.alertType === AlertType.Aggregation }),
                    React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(AlertType.Observable), checked: props.alertType === AlertType.Observable }),
                    React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === AlertType.Validation, onClick: () => props.onAlertTypeChange(AlertType.Validation) }))))));
};
