import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { XBaseControl } from "./XBaseControl";
import { PropertyEditorColor } from "../../CommonUI/PropertyEditing/PropertyEditorColor";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
import { Collapse } from "@material-ui/core";
export class XLineControl extends XBaseControl {
    constructor() {
        super();
        this.color = "black";
        this.height = 3;
        this.marginY = 0;
        this.sameMargin = true;
        this.fullWidth = true;
        this.canFocus = false;
    }
    render() {
        const styleHr = {
            width: this.fullWidth ? '100%' : this.width,
            color: this.color,
            backgroundColor: this.color,
            height: this.height,
            border: "none",
            borderRadius: this.borderRadius,
            marginTop: this.sameMargin ? this.marginY : this.marginTop,
            marginBottom: this.sameMargin ? this.marginY : this.marginBottom,
            marginLeft: 'auto',
            marginRight: 'auto',
        };
        return _jsx("hr", { style: styleHr, "data-testid": "hrTag" }, void 0);
    }
    renderEditUI() {
        return _jsx(XLineControlUI, { editMe: this }, void 0);
    }
    getDesignValidationIssues() {
        return [];
    }
    getRuntimeValidationIssues() {
        return [];
    }
    getAddedData() {
        return;
    }
}
export function XLineControlUI(props) {
    return (_jsxs(_Fragment, { children: [_jsx(PropertyEditorBoolean, { label: "Same Margin Top and Bottom", updateCallback: props.editMe.controlUpdate, propertyName: "sameMargin", editObject: props.editMe }, void 0),
            _jsx(Collapse, Object.assign({ in: props.editMe.sameMargin }, { children: _jsx(PropertyEditorInteger, { label: "Margin", updateCallback: props.editMe.controlUpdate, propertyName: "marginY", editObject: props.editMe }, void 0) }), void 0),
            _jsxs(Collapse, Object.assign({ in: !props.editMe.sameMargin }, { children: [_jsx(PropertyEditorInteger, { label: "Margin Top", updateCallback: props.editMe.controlUpdate, propertyName: "marginTop", editObject: props.editMe }, void 0),
                    _jsx(PropertyEditorInteger, { label: "Margin Bottom", updateCallback: props.editMe.controlUpdate, propertyName: "marginBottom", editObject: props.editMe }, void 0)] }), 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),
            _jsx(PropertyEditorInteger, { label: "Height", updateCallback: props.editMe.controlUpdate, propertyName: "height", editObject: props.editMe }, void 0),
            _jsx(PropertyEditorInteger, { label: "Border Radius", updateCallback: props.editMe.controlUpdate, propertyName: "borderRadius", editObject: props.editMe }, void 0),
            _jsx(PropertyEditorColor, { editObject: props.editMe, label: "Color", propertyName: "color", updateCallback: props.editMe.controlUpdate }, void 0)] }, void 0));
}
//# sourceMappingURL=XLineControl.js.map