"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorPickerFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const Tooltip_1 = tslib_1.__importDefault(require("@material-ui/core/Tooltip"));
const TextEntryFormControl_1 = require("../TextEntryFormControl");
const FormDesignConstants_1 = require("../../Utilities/FormDesignConstants");
const CommonStyled_1 = require("./CommonStyled");
const StringDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/StringDataDefinition");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const ColorPicker_1 = require("../../../CommonUI/BuilderUI/ColorPicker");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
//@RegisterUIControl('Data (Entry)', 'Text Field', ControlType.Control, <TextFieldIcon />)
class ColorPickerFormControl extends TextEntryFormControl_1.TextEntryFormControl {
    __type = "Color Picker";
    showPicker = false;
    onClick = () => {
        this.showPicker = true;
        StateManager_1.StateManager.propertyChanged(this, "showPicker");
    };
    onFocus = () => {
        this.showPicker = true;
        StateManager_1.StateManager.propertyChanged(this, "showPicker");
    };
    render() {
        let style = this.getFormContext()?.form?.defaultTextStyle;
        if (this.overrideStyle && this.style)
            style = this.style;
        let size = this.getFormContext()?.form?.defaultTextSize ?? "medium";
        if (this.overrideStyle && this.size)
            size = this.size;
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = issueData?.text || "";
        const customWidth = this.fullWidth ? "100%" : this.width ? `${this.width}px` : "200px";
        switch (style) {
            case FormDesignConstants_1.TextControlStyle.LABELED:
                return ((0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { onClick: this.onClick, background: this.getValue(), width: customWidth, children: [this.label && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledInputLabel, { "data-role": FormDesignConstants_1.TextControlStyle.LABELED, children: this.label })), (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, "data-size": size, "data-testid": this.valueName, onChange: () => { }, variant: "outlined", fullWidth: this.fullWidth, width: customWidth, value: this.getValue(), InputProps: {
                                onFocus: this.onFocus,
                                readOnly: true,
                                inputRef: this.ref,
                            }, error: Boolean(issueText) }), issueText && issueText.length > 30 && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: issueText, arrow: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "colorpicker"}-hinttext`, children: issueText.slice(0, 30) + "..." }) })), ((issueText && issueText.length < 31) || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "colorpicker"}-hinttext`, children: issueText ? issueText : this.hintText })), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this, properties: ["showPicker"], control: () => {
                                if (!this.showPicker)
                                    return null;
                                return ((0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { value: this.getValue(), onChange: this.handleChange, onClose: () => {
                                        this.showPicker = false;
                                        StateManager_1.StateManager.propertyChanged(this, "showPicker");
                                    } }));
                            } })] }));
            case FormDesignConstants_1.TextControlStyle.SHADED:
                return ((0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, onClick: this.onClick, background: this.getValue(), children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, "data-size": size, "data-testid": this.valueName, onChange: () => { }, variant: "filled", customstyle: "filled", fullWidth: this.fullWidth, width: customWidth, value: this.getValue(), InputProps: {
                                onFocus: this.onFocus,
                                readOnly: true,
                                inputRef: this.ref,
                            }, error: Boolean(issueText), label: this.valueName }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "colorpicker"}-hinttext`, children: issueText ? issueText : this.hintText })), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this, properties: ["showPicker"], control: () => {
                                if (!this.showPicker)
                                    return null;
                                return ((0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { value: this.getValue(), onChange: this.handleChange, onClose: () => {
                                        this.showPicker = false;
                                        StateManager_1.StateManager.propertyChanged(this, "showPicker");
                                    } }));
                            } })] }));
            case FormDesignConstants_1.TextControlStyle.UNDERLINED:
                return ((0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, onClick: this.onClick, background: this.getValue(), children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, "data-size": size, "data-testid": this.valueName, onChange: () => { }, variant: "standard", customstyle: "standard", fullWidth: this.fullWidth, width: customWidth, value: this.getValue(), InputProps: {
                                onFocus: this.onFocus,
                                readOnly: true,
                                inputRef: this.ref,
                            }, error: Boolean(issueText), label: this.valueName }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "colorpicker"}-hinttext`, children: issueText ? issueText : this.hintText })), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this, properties: ["showPicker"], control: () => {
                                if (!this.showPicker)
                                    return null;
                                return ((0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { value: this.getValue(), onChange: this.handleChange, onClose: () => {
                                        this.showPicker = false;
                                        StateManager_1.StateManager.propertyChanged(this, "showPicker");
                                    } }));
                            } })] }));
            case FormDesignConstants_1.TextControlStyle.OUTLINE:
                return ((0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, onClick: this.onClick, background: this.getValue(), children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, "data-size": size, "data-testid": this.valueName, onChange: () => { }, variant: "outlined", customstyle: "outlined", fullWidth: this.fullWidth, width: customWidth, value: this.getValue(), InputProps: {
                                onFocus: this.onFocus,
                                readOnly: true,
                                inputRef: this.ref,
                            }, error: Boolean(issueText), label: this.valueName }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "colorpicker"}-hinttext`, children: issueText ? issueText : this.hintText })), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this, properties: ["showPicker"], control: () => {
                                if (!this.showPicker)
                                    return null;
                                return ((0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { value: this.getValue(), onChange: this.handleChange, onClose: () => {
                                        this.showPicker = false;
                                        StateManager_1.StateManager.propertyChanged(this, "showPicker");
                                    } }));
                            } })] }));
        }
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XColorPickerEditUI, { editMe: this });
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition_1.StringDataDefinition();
        def.name = this.valueName;
        return def;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type");
    }
    handleChange = (color) => {
        this.showPicker = false;
        StateManager_1.StateManager.propertyChanged(this, "showPicker");
        if (this.valueName) {
            this.setFormDataValue(this.valueName, color);
        }
    };
    getValue = () => {
        if (this.valueName) {
            return this.getFormDataValue(this.valueName);
        }
    };
}
exports.ColorPickerFormControl = ColorPickerFormControl;
function XColorPickerEditUI(props) {
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.editMe.renderBaseDataControlEditor(), props.editMe.renderTextControlBasePropertyEditor(), props.editMe.renderTextStyleSelectionEditor()] }));
}
const StyledTextFieldWrap = styled_components_1.default.div `
    width: ${({ width }) => width} !important;
    height: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;

    input {
        background: ${(props) => props.background || "transparent"} !important;
    }
`;
//# sourceMappingURL=ColorPickerFormControl.js.map