"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Field = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const throttle_1 = tslib_1.__importDefault(require("../../Utilities/utils/throttle"));
const AdaptableContext_1 = require("../AdaptableContext");
const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
const FormLayout_1 = require("../../components/FormLayout");
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const ColorPicker_1 = require("../../components/ColorPicker");
const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
const Flex_1 = require("../../components/Flex");
const Field = (props) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    let input = null;
    let value = props.value;
    const throttledOnChange = React.useMemo(() => {
        return (0, throttle_1.default)((value) => {
            props.onChange(value);
        }, 300);
    }, []);
    if (value === undefined) {
        value = (0, StyleHelper_1.getVariableColor)(`var(${props.variable})`);
    }
    switch (props.type) {
        case 'number':
            input = (React.createElement(AdaptableInput_1.default, { disabled: props.disabled, type: "number", onChange: (event) => throttledOnChange(event.target.value), value: value }));
            break;
        case 'color':
            input = (React.createElement(ColorPicker_1.ColorPicker, { disabled: props.disabled, includeAlpha: false, api: adaptable.api, value: value, onChange: (color) => throttledOnChange(color) }));
            break;
    }
    return (React.createElement(FormLayout_1.FormRow, { label: props.name },
        React.createElement(Flex_1.Flex, null,
            input,
            React.createElement(SimpleButton_1.default, { disabled: props.value === undefined, onClick: () => props.onChange(false) }, "Clear"))));
};
exports.Field = Field;
