import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Typography, Collapse, Tooltip } from "@material-ui/core";
import styled from "styled-components";
import { XBaseControl } from "./XBaseControl";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { PropertyEditorSelect } from "../../CommonUI/PropertyEditing/PropertyEditorSelect";
import { PropertyEditorText } from "../../CommonUI/PropertyEditing/PropertyEditorText";
import { PropertyEditorColor } from "../../CommonUI/PropertyEditing/PropertyEditorColor";
class XHeadingEditUI extends React.Component {
    constructor() {
        super(...arguments);
        this.options = [
            "h1",
            "h2",
            "h3",
            "h4",
            "h5",
            "h6",
            "subtitle1",
            "subtitle2",
            "body1",
            "caption",
            "button",
            "overline",
            "srOnly",
            "inherit",
        ];
    }
    render() {
        return (_jsxs(_Fragment, { children: [_jsx(PropertyEditorSelect, { editObject: this.props.editMe, propertyName: "type", options: this.options, updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "fontSize", label: "Font Size", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorSelect, { editObject: this.props.editMe, propertyName: "textAlign", label: "Text Align", options: ["left", "center", "right"], updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorColor, { editObject: this.props.editMe, propertyName: "color", label: "Color", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorColor, { editObject: this.props.editMe, propertyName: "background", label: "Background", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "maxLength", label: "Max Length", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "fromData", label: "From Data?", updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(Collapse, Object.assign({ in: this.props.editMe.fromData }, { children: _jsx(PropertyEditorText, { editObject: this.props.editMe, propertyName: "valueName", label: "Value Name For Data", updateCallback: this.props.editMe.controlUpdate }, void 0) }), void 0),
                _jsx(Collapse, Object.assign({ in: !this.props.editMe.fromData }, { children: _jsx(PropertyEditorText, { editObject: this.props.editMe, propertyName: "text", label: "Static Text", updateCallback: this.props.editMe.controlUpdate }, void 0) }), void 0), " "] }, void 0));
    }
}
export class XHeading extends XBaseControl {
    constructor() {
        super();
        this.type = "h1";
        this.text = "Heading";
        this.fromData = false;
        this.maxLength = 20;
        this.textAlign = "left";
        this.canFocus = false;
    }
    render() {
        const headText = this.fromData ? (this.valueName ? this.getFormDataValue(this.valueName) : "") : this.text;
        if (this.maxLength && (headText || "").length > this.maxLength) {
            return (_jsx(Tooltip, Object.assign({ title: headText }, { children: _jsxs(StyledHeading, Object.assign({ 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), "..."] }), void 0) }), void 0));
        }
        return (_jsx(StyledHeading, Object.assign({ style: { width: "100%" }, "data-testid": "xheading", variant: this.type, fontSize: this.fontSize, background: this.background, customColor: this.color, align: this.textAlign }, { children: headText }), void 0));
    }
    renderEditUI() {
        return _jsx(XHeadingEditUI, { editMe: this }, void 0);
    }
    getDesignValidationIssues() {
        return [];
    }
    getRuntimeValidationIssues() {
        return [];
    }
    getAddedData() {
        return;
    }
}
const StyledHeading = styled(Typography) `
    && {
        font-family: Inter;
        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=XHeading.js.map