import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
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 { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { ValidationIssue } from "../../Common/IDesignValidationProvider";
class XMultiLineTextEditEditUI extends React.Component {
    render() {
        return (_jsxs(_Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), _jsx(PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "rowMax", label: "Rows Max", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "rowMin", label: "Rows Min", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "min", label: "Min Length", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "max", label: "Max Length", updateCallback: this.props.editMe.controlUpdate }, void 0), this.props.editMe.renderTextControlBasePropertyEditor(), this.props.editMe.renderTextStyleSelectionEditor()] }, void 0));
    }
}
export class XMultiLineTextEdit extends BaseTextEntryControl {
    constructor() {
        super(...arguments);
        this.rowMax = 10;
        this.rowMin = 5;
        this.handleChange = (event) => {
            if (this.valueName) {
                this.setFormDataValue(this.valueName, event.currentTarget.value);
            }
        };
        this.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;
            }
        };
    }
    render() {
        var _a, _b;
        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;
        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` : "50%";
        switch (style) {
            case TextControlStyle.LABELED:
                return (_jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth }, { children: [this.label && _jsx(StyledInputLabel, { children: this.label }, void 0),
                        _jsx(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
                            } }, 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 || "textarea"}-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 || "textarea"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0));
            case TextControlStyle.SHADED:
                return (_jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth }, { children: [_jsx(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
                            } }, 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 || "textarea"}-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 || "textarea"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0));
            case TextControlStyle.UNDERLINED:
                return (_jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth }, { children: [_jsx(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
                            } }, 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 || "textarea"}-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 || "textarea"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0));
            case TextControlStyle.OUTLINE:
                return (_jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth }, { children: [_jsx(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
                            } }, 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 || "textarea"}-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 || "textarea"}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0));
        }
    }
    getRuntimeValidationIssues() {
        const runtimeIssues = super.getRuntimeValidationIssues();
        const validationIssues = this.validate();
        if (validationIssues) {
            for (let val of validationIssues) {
                runtimeIssues.push(new ValidationIssue(val, this.valueName, this.id));
            }
        }
        return runtimeIssues;
    }
    renderEditUI() {
        return _jsx(XMultiLineTextEditEditUI, { editMe: this }, void 0);
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition();
        def.name = this.valueName;
        return def;
    }
}
const StyledTextFieldWrap = styled.div `
    width: ${({ width }) => width} !important;
    height: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
`;
//# sourceMappingURL=XMultiLineTextEdit.js.map