import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled from "styled-components";
import Tooltip from "@material-ui/core/Tooltip";
import { BaseTextEntryControl } from "./BaseTextEntryControl";
import { TextControlStyle } from "../FormDesignConstants";
import { StyledInputLabel, StyledFormHelperText } from "./XCommonStyled";
import { StyledTextField } from "./XCommonStyled";
import { StringDataDefinition } from "../../Common/Data/Definitions/StringDataDefinition";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { ColorPicker } from "../../CommonUI/BuildUI/ColorPicker";
//@RegisterUIControl('Data (Entry)', 'Text Field', ControlType.Control, <TextFieldIcon />)
export class XColorPicker extends BaseTextEntryControl {
    constructor() {
        super(...arguments);
        this.showPicker = false;
        this.onClick = () => {
            this.showPicker = true;
            StateManager.propertyChanged(this, "showPicker");
        };
        this.onFocus = () => {
            this.showPicker = true;
            StateManager.propertyChanged(this, "showPicker");
        };
        this.handleChange = (color) => {
            this.showPicker = false;
            StateManager.propertyChanged(this, "showPicker");
            if (this.valueName) {
                this.setFormDataValue(this.valueName, color);
            }
        };
        this.getValue = () => {
            if (this.valueName) {
                return this.getFormDataValue(this.valueName);
            }
        };
    }
    render() {
        var _a, _b, _c, _d, _e;
        let style = (_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultTextStyle;
        if (this.overrideStyle && this.style)
            style = this.style;
        let size = (_e = (_d = (_c = this.getFormContext()) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.defaultTextSize) !== null && _e !== void 0 ? _e : "medium";
        if (this.overrideStyle && this.size)
            size = this.size;
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = (issueData === null || issueData === void 0 ? void 0 : issueData.text) || "";
        const customWidth = this.fullWidth ? "100%" : this.width ? `${this.width}px` : "200px";
        switch (style) {
            case TextControlStyle.LABELED:
                return (_jsxs(StyledTextFieldWrap, Object.assign({ onClick: this.onClick, background: this.getValue(), width: customWidth }, { children: [this.label && (_jsx(StyledInputLabel, Object.assign({ "data-role": TextControlStyle.LABELED }, { children: this.label }), void 0)),
                        _jsx(StyledTextField, { size: size, "data-size": size, "data-testid": this.valueName, onChange: (event) => { }, variant: "outlined", fullWidth: this.fullWidth, width: customWidth, value: this.getValue(), InputProps: {
                                onFocus: this.onFocus,
                                readOnly: true,
                                inputRef: this.ref
                            }, error: Boolean(issueText) }, void 0),
                        issueText && issueText.length > 30 && (_jsx(Tooltip, Object.assign({ title: issueText, arrow: true, placement: "bottom" }, { children: _jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "colorpicker"}-hinttext` }, { children: issueText.slice(0, 30) + "..." }), void 0) }), void 0)),
                        ((issueText && issueText.length < 31) || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "colorpicker"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0)),
                        _jsx(ObserveState, { listenTo: this, properties: ["showPicker"], control: () => {
                                if (!this.showPicker)
                                    return null;
                                return (_jsx(ColorPicker, { value: this.getValue(), onChange: this.handleChange, onClose: () => {
                                        this.showPicker = false;
                                        StateManager.propertyChanged(this, "showPicker");
                                    } }, void 0));
                            } }, void 0)] }), void 0));
            case TextControlStyle.SHADED:
                return (_jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth, onClick: this.onClick, background: this.getValue() }, { children: [_jsx(StyledTextField, { size: size, "data-size": size, "data-testid": this.valueName, onChange: (event) => { }, 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 }, void 0),
                        (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "colorpicker"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0)),
                        _jsx(ObserveState, { listenTo: this, properties: ["showPicker"], control: () => {
                                if (!this.showPicker)
                                    return null;
                                return (_jsx(ColorPicker, { value: this.getValue(), onChange: this.handleChange, onClose: () => {
                                        this.showPicker = false;
                                        StateManager.propertyChanged(this, "showPicker");
                                    } }, void 0));
                            } }, void 0)] }), void 0));
            case TextControlStyle.UNDERLINED:
                return (_jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth, onClick: this.onClick, background: this.getValue() }, { children: [_jsx(StyledTextField, { size: size, "data-size": size, "data-testid": this.valueName, onChange: (event) => { }, 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 }, void 0),
                        (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "colorpicker"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0)),
                        _jsx(ObserveState, { listenTo: this, properties: ["showPicker"], control: () => {
                                if (!this.showPicker)
                                    return null;
                                return (_jsx(ColorPicker, { value: this.getValue(), onChange: this.handleChange, onClose: () => {
                                        this.showPicker = false;
                                        StateManager.propertyChanged(this, "showPicker");
                                    } }, void 0));
                            } }, void 0)] }), void 0));
            case TextControlStyle.OUTLINE:
                return (_jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth, onClick: this.onClick, background: this.getValue() }, { children: [_jsx(StyledTextField, { size: size, "data-size": size, "data-testid": this.valueName, onChange: (event) => { }, 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 }, void 0),
                        (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || "colorpicker"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0)),
                        _jsx(ObserveState, { listenTo: this, properties: ["showPicker"], control: () => {
                                if (!this.showPicker)
                                    return null;
                                return (_jsx(ColorPicker, { value: this.getValue(), onChange: this.handleChange, onClose: () => {
                                        this.showPicker = false;
                                        StateManager.propertyChanged(this, "showPicker");
                                    } }, void 0));
                            } }, void 0)] }), void 0));
        }
    }
    renderEditUI() {
        return _jsx(XColorPickerEditUI, { editMe: this }, void 0);
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition();
        def.name = this.valueName;
        return def;
    }
}
function XColorPickerEditUI(props) {
    return (_jsxs(_Fragment, { children: [props.editMe.renderBaseDataControlEditor(), props.editMe.renderTextControlBasePropertyEditor(), props.editMe.renderTextStyleSelectionEditor()] }, void 0));
}
const StyledTextFieldWrap = styled.div `
    width: ${({ width }) => width} !important;
    height: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    input {
        background: ${(props) => props.background || "transparent"} !important;
    }
`;
//# sourceMappingURL=XColorPicker.js.map