"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FlashingAlertSettingsWizardSection = exports.renderFlashingAlertSettingsSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const rebass_1 = require("rebass");
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const usePrevious_1 = tslib_1.__importDefault(require("../../../components/utils/usePrevious"));
const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
const Tabs_1 = require("../../../components/Tabs");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const CodeBlock_1 = require("../../../components/CodeBlock");
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const CheckBox_1 = require("../../../components/CheckBox");
const renderFlashingAlertSettingsSummary = (flashingAlert) => {
    return (React.createElement(React.Fragment, null,
        React.createElement(rebass_1.Text, { fontSize: 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_1.CodeBlock, null, flashingAlert.FlashDuration),
            ' ',
            "milliseconds")))));
};
exports.renderFlashingAlertSettingsSummary = renderFlashingAlertSettingsSummary;
const FlashingAlertSettingsWizardSection = (props) => {
    let { data: flashingCell } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    flashingCell = flashingCell ?? props.flashingCell;
    const setDuration = (FlashDuration) => {
        props.onChange({ ...flashingCell, FlashDuration: FlashDuration });
    };
    const duration = flashingCell.FlashDuration ?? 500;
    const numberDuration = React.useRef(typeof duration === 'number' ? duration : 500);
    const inputRef = (0, react_1.useRef)(null);
    const oldDuration = (0, usePrevious_1.default)(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(rebass_1.Flex, { height: "100%", flexDirection: "column", "data-name": "plus-minus-column-settings" },
        React.createElement(Tabs_1.Tabs, { autoFocus: false, padding: 2 },
            React.createElement(Tabs_1.Tabs.Tab, null, "Flashing Cell Settings"),
            React.createElement(Tabs_1.Tabs.Content, null,
                React.createElement(FormLayout_1.default, null,
                    React.createElement(FormLayout_1.FormRow, { label: "Duration Type" },
                        React.createElement(Radio_1.default, { "data-name": "duration-type-always", mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
                        React.createElement(Radio_1.default, { "data-name": "duration-type-number", checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
                    React.createElement(FormLayout_1.FormRow, { label: "" },
                        duration !== 'always' && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "baseline" },
                            React.createElement(rebass_1.Text, { fontSize: 2, mr: 2 }, "After"),
                            React.createElement(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
                                    const value = event.target.value;
                                    setDuration(isNaN(Number(value)) ? 500 : Number(value));
                                } }),
                            React.createElement(rebass_1.Text, { fontSize: 2 }, "milliseconds"))),
                        duration === 'always' && (React.createElement(rebass_1.Text, { height: 43, fontSize: 3 }, "Persists the flashing style indeterminately - can be removed manually"))),
                    React.createElement(FormLayout_1.FormRow, { label: "Flash Target" },
                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: flashingCell?.FlashTarget === 'cell' ||
                                flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
                                flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1 }, "Row"),
                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
                                flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")))))));
};
exports.FlashingAlertSettingsWizardSection = FlashingAlertSettingsWizardSection;
