import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { BaseTextEntryControl } from "./BaseTextEntryControl";
import { InlineTextEdit } from "../../CommonUI/InlineTextEdit";
import { PropertyEditorText } from "../../CommonUI/PropertyEditing/PropertyEditorText";
import { PropertyEditorSelect } from "../../CommonUI/PropertyEditing/PropertyEditorSelect";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { Collapse } from "@material-ui/core";
import { StyledFormHelperText } from "./XCommonStyled";
import { StringDataDefinition } from "../../Common/Data/Definitions/StringDataDefinition";
export class XInlineTextEdit extends BaseTextEntryControl {
    constructor() {
        super(...arguments);
        this.type = "h6";
    }
    focusControl() {
        this.ref.current && this.ref.current.click();
    }
    render() {
        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`
                : "300px";
        return (_jsxs("div", { children: [_jsx(InlineTextEdit, { text: this.valueName && this.getFormDataValue(this.valueName), onEdit: (val) => this.valueName &&
                        val !== "" &&
                        this.setFormDataValue(this.valueName, val), placeholder: this.placeholderText || "Label", variant: this.type, fullWidth: this.fullWidth, width: customWidth, multiLine: false, ref: this.ref }, void 0),
                (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": "issueOrHintText" }, { children: issueText ? issueText : this.hintText }), void 0))] }, void 0));
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let dd = new StringDataDefinition();
        dd.name = this.valueName;
        return dd;
    }
    renderEditUI() {
        return _jsx(XInlineTextEditUI, { editMe: this }, void 0);
    }
}
function XInlineTextEditUI(props) {
    const options = [
        "h1",
        "h2",
        "h3",
        "h4",
        "h5",
        "h6",
        "subtitle1",
        "subtitle2",
        "body1",
        "caption",
        "button",
        "overline",
    ];
    return (_jsxs(_Fragment, { children: [_jsx(PropertyEditorSelect, { label: "Select Tag", propertyName: "type", editObject: props.editMe, updateCallback: props.editMe.controlUpdate, options: options }, void 0), props.editMe.renderBaseDataControlEditor(['label']), _jsx(PropertyEditorText, { label: "Placeholder Text", propertyName: "placeholderText", editObject: props.editMe, updateCallback: props.editMe.controlUpdate }, void 0),
            _jsx(PropertyEditorText, { label: "Hint Text", propertyName: "hintText", editObject: props.editMe, updateCallback: props.editMe.controlUpdate }, void 0),
            _jsx(PropertyEditorBoolean, { label: "Full Width", updateCallback: props.editMe.controlUpdate, propertyName: "fullWidth", editObject: props.editMe }, void 0),
            _jsx(Collapse, Object.assign({ in: !props.editMe.fullWidth }, { children: _jsx(PropertyEditorInteger, { label: "Width", updateCallback: props.editMe.controlUpdate, propertyName: "width", editObject: props.editMe }, void 0) }), void 0)] }, void 0));
}
//# sourceMappingURL=XInlineTextEdit.js.map