"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiLineTextEditFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
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 PropertyEditorInteger_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorInteger");
const IDesignValidationProvider_1 = require("@appglue/common/dist/Common/IDesignValidationProvider");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class XMultiLineTextEditEditUI extends react_1.default.Component {
    render() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "rowMax", label: "Rows Max", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "rowMin", label: "Rows Min", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "min", label: "Min Length", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "max", label: "Max Length", updateCallback: this.props.editMe.controlUpdate }), this.props.editMe.renderTextControlBasePropertyEditor(), this.props.editMe.renderTextStyleSelectionEditor()] }));
    }
}
class MultiLineTextEditFormControl extends TextEntryFormControl_1.TextEntryFormControl {
    __type = "Text Area";
    rowMax = 10;
    rowMin = 5;
    min;
    max;
    render() {
        let style = this.getFormContext()?.form?.defaultTextStyle;
        if (this.overrideStyle && this.style)
            style = this.style;
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = issueData?.text || "";
        const customWidth = this.fullWidth ? "100%" : this.width ? `${this.width}px` : "50%";
        switch (style) {
            case FormDesignConstants_1.TextControlStyle.LABELED:
                return ((0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, children: [this.label && (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledInputLabel, { children: this.label }), (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { width: customWidth, variant: "outlined", fullWidth: this.fullWidth, error: Boolean(issueText), "data-testid": this.valueName, rows: this.rowMin, rowsMax: this.rowMax, multiline: true, onChange: this.handleChange, value: this.valueName ? this.getFormDataValue(this.valueName) : "", InputProps: {
                                inputRef: this.ref,
                            } }), 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 || "textarea"}-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 || "textarea"}-hinttext`, children: issueText ? issueText : this.hintText }))] }));
            case FormDesignConstants_1.TextControlStyle.SHADED:
                return ((0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { width: customWidth, variant: "filled", customstyle: "filled", fullWidth: this.fullWidth, error: Boolean(issueText), "data-testid": this.valueName, rows: this.rowMin, rowsMax: this.rowMax, multiline: true, onChange: this.handleChange, value: this.valueName ? this.getFormDataValue(this.valueName) : "", label: this.label, InputProps: {
                                inputRef: this.ref,
                            } }), 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 || "textarea"}-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 || "textarea"}-hinttext`, children: issueText ? issueText : this.hintText }))] }));
            case FormDesignConstants_1.TextControlStyle.UNDERLINED:
                return ((0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { width: customWidth, variant: "standard", customstyle: "standard", fullWidth: this.fullWidth, error: Boolean(issueText), "data-testid": this.valueName, rows: this.rowMin, rowsMax: this.rowMax, multiline: true, onChange: this.handleChange, value: this.valueName ? this.getFormDataValue(this.valueName) : "", label: this.label, InputProps: {
                                inputRef: this.ref,
                            } }), 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 || "textarea"}-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 || "textarea"}-hinttext`, children: issueText ? issueText : this.hintText }))] }));
            case FormDesignConstants_1.TextControlStyle.OUTLINE:
                return ((0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { width: customWidth, variant: "outlined", customstyle: "outlined", fullWidth: this.fullWidth, error: Boolean(issueText), "data-testid": this.valueName, rows: this.rowMin, rowsMax: this.rowMax, multiline: true, onChange: this.handleChange, value: this.valueName ? this.getFormDataValue(this.valueName) : "", label: this.label, InputProps: {
                                inputRef: this.ref,
                            } }), 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 || "textarea"}-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 || "textarea"}-hinttext`, children: issueText ? issueText : this.hintText }))] }));
        }
    }
    getRuntimeValidationIssues() {
        const runtimeIssues = super.getRuntimeValidationIssues();
        const validationIssues = this.validate();
        if (validationIssues) {
            for (let val of validationIssues) {
                runtimeIssues.push(new IDesignValidationProvider_1.ValidationIssue(val, this.valueName, this.id));
            }
        }
        return runtimeIssues;
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XMultiLineTextEditEditUI, { 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", "rowMax", "rowMin", "min", "max");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "rowMax", "rowMin", "min", "max");
    }
    handleChange = (event) => {
        if (this.valueName) {
            this.setFormDataValue(this.valueName, event.currentTarget.value);
        }
    };
    validate = () => {
        let value = this.valueName ? this.getFormDataValue(this.valueName) : "";
        if (this.valueName && (this.min !== undefined || this.max !== undefined)) {
            const errorMessages = [];
            if (value && this.min && this.min > value.length) {
                errorMessages.push(`Value should be longer than ${this.min}`);
            }
            if (value && this.max && this.max < value.length) {
                errorMessages.push(`Value should be more short than ${this.max}`);
            }
            return errorMessages;
        }
    };
}
exports.MultiLineTextEditFormControl = MultiLineTextEditFormControl;
const StyledTextFieldWrap = styled_components_1.default.div `
    width: ${({ width }) => width} !important;
    height: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
`;
//# sourceMappingURL=MultiLineTextEditFormControl.js.map