import * as React from 'react';
import { useRef } from 'react';
import Input from '../../../components/Input';
import usePrevious from '../../../components/utils/usePrevious';
import { Tabs } from '../../../components/Tabs';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { CodeBlock } from '../../../components/CodeBlock';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { CheckBox } from '../../../components/CheckBox';
import { Box, Flex } from '../../../components/Flex';
import { Tag } from '../../../components/Tag';
import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
export const isSettingsValid = (data, api) => {
    if (!data.Name?.trim()) {
        return 'Name is required';
    }
    const allFlashingCells = api.flashingCellApi.getFlashingCellDefinitions();
    const isDuplicateName = allFlashingCells.some((fc) => fc.Name === data.Name && fc.Uuid !== data.Uuid);
    if (isDuplicateName) {
        return 'A Flashing Cell already exists with that name';
    }
    return true;
};
export const renderFlashingAlertSettingsSummary = (flashingAlert) => {
    return (React.createElement(React.Fragment, null,
        React.createElement(SummaryText, null,
            "Name ",
            React.createElement(Tag, null, flashingAlert.Name || 'Not specified')),
        React.createElement(Box, { className: "twa:text-2" }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,
            "Flashing is removed after ",
            React.createElement(CodeBlock, null, flashingAlert.FlashDuration),
            ' ',
            "milliseconds")))));
};
export const FlashingAlertSettingsWizardSection = (props) => {
    let { data: flashingCell } = useOnePageAdaptableWizardContext();
    flashingCell = flashingCell ?? props.flashingCell;
    const handleNameChange = (event) => {
        props.onChange({
            ...flashingCell,
            Name: event.target.value,
        });
    };
    const setDuration = (FlashDuration) => {
        props.onChange({ ...flashingCell, FlashDuration: FlashDuration });
    };
    const duration = flashingCell.FlashDuration ?? 500;
    const numberDuration = React.useRef(typeof duration === 'number' ? duration : 500);
    const inputRef = useRef(null);
    const oldDuration = usePrevious(duration, duration);
    React.useEffect(() => {
        if (oldDuration === 'always' && duration != oldDuration) {
            inputRef.current?.focus();
        }
    }, [duration, oldDuration]);
    const handleTypeChange = (type) => {
        setDuration(type === 'number' ? numberDuration.current : 'always');
    };
    const handleTargetChange = (type, checked) => {
        let FlashTarget = flashingCell.FlashTarget ?? [];
        if (typeof FlashTarget === 'string') {
            FlashTarget = [FlashTarget];
        }
        if (Array.isArray(FlashTarget)) {
            if (checked) {
                FlashTarget = [...FlashTarget, type];
            }
            else {
                FlashTarget = FlashTarget.filter((target) => type != target);
            }
        }
        props.onChange({
            ...flashingCell,
            FlashTarget,
        });
    };
    return (React.createElement(Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full" },
        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
            React.createElement(Tabs.Tab, null, "Flashing Cell Settings"),
            React.createElement(Tabs.Content, null,
                React.createElement(FormLayout, null,
                    React.createElement(FormRow, { label: "Name" },
                        React.createElement(Input, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' })),
                    React.createElement(FormRow, { label: "Flash Target" },
                        React.createElement(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
                                flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
                        React.createElement(CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
                                flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1 }, "Row"),
                        React.createElement(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
                                flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")),
                    React.createElement(FormRow, { label: "Duration" },
                        React.createElement(Flex, { alignItems: "center" },
                            React.createElement(CheckBox, { "data-name": "duration-always", checked: duration === 'always', onChange: (checked) => handleTypeChange(checked ? 'always' : 'number'), className: "twa:mr-4", tabIndex: -1 }, "Always"),
                            duration !== 'always' && (React.createElement(React.Fragment, null,
                                React.createElement(Input, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-20 twa:mr-2", value: duration, onChange: (event) => {
                                        const value = event.target.value;
                                        setDuration(isNaN(Number(value)) ? 500 : Number(value));
                                    } }),
                                React.createElement(Box, { className: "twa:text-2" }, "ms"))))))))));
};
