"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptableOptionsForm = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const CheckBox_1 = require("../../../components/CheckBox");
const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
const MetamodelService_1 = require("../../../Utilities/Services/MetamodelService");
const AdaptablePopover_1 = require("../../AdaptablePopover");
const Flex_1 = require("../../../components/Flex");
const SUPPORTED_PRIMITEVE_TYPES = ['s', 'n', 'b'];
const OptionInput = (props) => {
    const { name, defaultValue, value, description, uiLabel } = props.option;
    const label = uiLabel ?? StringExtensions_1.default.Humanize(name);
    let input = React.createElement(React.Fragment, null);
    const info = (React.createElement(Flex_1.Box, { className: "twa:ml-2" },
        React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [description] })));
    const handleInputChange = (event) => props.onChange({ ...props.option, value: event.currentTarget.value });
    const handleCheckboxChange = (checked) => props.onChange({ ...props.option, value: checked });
    // option is mutated to acomodate complex types overrides
    const option = { ...props.option };
    const isOptionNonHomogenusUnion = (option) => {
        const isUnion = option.kind.includes('|');
        return isUnion && option.kind.split('|').some((unionEl) => !/['"]/.test(unionEl));
    };
    if (isOptionNonHomogenusUnion(option)) {
        // pick the first type
        const newKind = option.kind
            .split('|')
            .find((unionEl) => SUPPORTED_PRIMITEVE_TYPES.includes(unionEl.trim()))
            .trim();
        if (newKind)
            option.kind = newKind;
    }
    const inputProps = {
        value: value ?? defaultValue,
        minWidth: 200,
        fontSize: 3,
        mr: 2,
    };
    if (option.kind.includes('|')) {
        const options = option.kind
            .split('|')
            .map((str) => str.trim().replace(/['"]/g, ''))
            .map((str) => ({
            label: StringExtensions_1.default.Humanize(str),
            onClick: () => props.onChange({ ...option, value: str }),
        }));
        input = (React.createElement(DropdownButton_1.default, { ...inputProps, columns: ['label'], items: options }, StringExtensions_1.default.Humanize(value)));
    }
    else {
        switch (option.kind) {
            case 'n':
                input = React.createElement(Input_1.default, { type: "number", onChange: handleInputChange, ...inputProps });
                break;
            case 's':
                input = React.createElement(Input_1.default, { type: "text", onChange: handleInputChange, ...inputProps });
                break;
            case 'b':
                input = (React.createElement(CheckBox_1.CheckBox, { onChange: handleCheckboxChange, checked: Boolean(value), type: "date" }, label));
                break;
        }
    }
    let content = (React.createElement(React.Fragment, null,
        React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:min-w-[250px]" },
            label,
            " ",
            info),
        input));
    if (option.kind === 'b') {
        content = (React.createElement(Flex_1.Flex, { alignItems: "center" },
            input,
            " ",
            info));
    }
    return React.createElement(Flex_1.Flex, { className: "twa:mb-2 twa:pl-1" }, content);
};
const OptionsSection = (props) => {
    if (!props.options.length) {
        return React.createElement(React.Fragment, null);
    }
    return (React.createElement(Flex_1.Box, { className: "twa:mb-2" },
        React.createElement(HelpBlock_1.default, { className: "twa:mb-2" }, props.name ?? props.id),
        props.options.map((option, index) => (React.createElement(OptionInput, { key: index, option: option, onChange: props.onChange })))));
};
const AdaptableOptionsForm = (props) => {
    const nocodeOptions = React.useMemo(() => {
        const metamodelService = new MetamodelService_1.MetamodelService(() => props.adaptableOptions);
        return [...metamodelService.getGridInfoNoCodeOptions()];
    }, [props.adaptableOptions]);
    const handleOptionChange = (sectionName) => (option) => {
        const adaptableOptions = { ...props.adaptableOptions };
        if (sectionName === 'baseOptions') {
            // @ts-ignore
            adaptableOptions[option.name] = option.value;
        }
        else {
            // @ts-ignore
            adaptableOptions[sectionName] = {
                // @ts-ignore
                ...adaptableOptions[sectionName],
                [option.name]: option.value,
            };
        }
        props.onChangedAdaptableOptions(adaptableOptions);
    };
    return (React.createElement(Flex_1.Box, { className: "twa:p-2" }, nocodeOptions.map(([sectionName, { containerLabel, items }]) => {
        return (React.createElement(OptionsSection, { onChange: handleOptionChange(sectionName), key: sectionName, id: sectionName, name: containerLabel, options: items }));
    })));
};
exports.AdaptableOptionsForm = AdaptableOptionsForm;
