"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HeadingFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const FormControl_1 = require("../FormControl");
const PropertyEditorBoolean_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const PropertyEditorInteger_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorInteger");
const PropertyEditorSelect_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorSelect");
const PropertyEditorText_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorText");
const PropertyEditorColor_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorColor");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class XHeadingEditUI extends react_1.default.Component {
    options = [
        "h1",
        "h2",
        "h3",
        "h4",
        "h5",
        "h6",
        "subtitle1",
        "subtitle2",
        "body1",
        "caption",
        "button",
        "overline",
        "srOnly",
        "inherit",
    ];
    render() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: this.props.editMe, propertyName: "type", options: this.options, updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "fontSize", label: "Font Size", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: this.props.editMe, propertyName: "textAlign", label: "Text Align", options: ["left", "center", "right"], updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: this.props.editMe, propertyName: "color", label: "Color", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: this.props.editMe, propertyName: "background", label: "Background", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "maxLength", label: "Max Length", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "fromData", label: "From Data?", updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.props.editMe.fromData, children: (0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: this.props.editMe, propertyName: "valueName", label: "Value Name For Data", updateCallback: this.props.editMe.controlUpdate }) }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: !this.props.editMe.fromData, children: (0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: this.props.editMe, propertyName: "text", label: "Static Text", updateCallback: this.props.editMe.controlUpdate }) }), " "] }));
    }
}
class HeadingFormControl extends FormControl_1.FormControl {
    __type = "Heading";
    type = "h1";
    text = "Heading";
    valueName;
    fromData = false;
    maxLength = 20;
    fontSize;
    color;
    background;
    textAlign = "left";
    constructor() {
        super();
        this.canFocus = false;
    }
    render() {
        const headText = this.fromData ? (this.valueName ? this.getFormDataValue(this.valueName) : "") : this.text;
        if (this.maxLength && (headText || "").length > this.maxLength) {
            return ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: headText, children: (0, jsx_runtime_1.jsxs)(StyledHeading, { style: { width: "100%" }, "data-testid": "xheading", fontSize: this.fontSize, background: this.background, customColor: this.color, variant: this.type, align: this.textAlign, children: [headText.slice(0, this.maxLength), "..."] }) }));
        }
        return ((0, jsx_runtime_1.jsx)(StyledHeading, { style: { width: "100%" }, "data-testid": "xheading", variant: this.type, fontSize: this.fontSize, background: this.background, customColor: this.color, align: this.textAlign, children: headText }));
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XHeadingEditUI, { editMe: this });
    }
    getDesignValidationIssues() {
        return [];
    }
    getRuntimeValidationIssues() {
        return [];
    }
    getAddedData() {
        return;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "type", "text", "valueName", "fromData", "maxLength", "fontSize", "color", "background", "textAlign");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "type", "text", "valueName", "fromData", "maxLength", "fontSize", "color", "background", "textAlign");
    }
}
exports.HeadingFormControl = HeadingFormControl;
const StyledHeading = (0, styled_components_1.default)(core_1.Typography) `
    && {
        font-style: normal;
        font-weight: 600;
        letter-spacing: 0px;

        ${(props) => (props.fontSize ? `font-size: ${props.fontSize}px;` : ``)}
        ${(props) => (props.background ? `background: ${props.background};` : ``)}
    ${(props) => (props.customColor ? `color: ${props.customColor};` : ``)}
    }
`;
//# sourceMappingURL=HeadingFormControl.js.map