"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyEditorTextSizeSelection = exports.PropertyEditorTextStyleSelection = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const FormDesignConstants_1 = require("../../Form/Utilities/FormDesignConstants");
const TextLabelIcon_1 = require("../../CommonUI/Icon/TextLabelIcon");
const TextOutlineIcon_1 = require("../../CommonUI/Icon/TextOutlineIcon");
const TextShadedIcon_1 = require("../../CommonUI/Icon/TextShadedIcon");
const TextUnderlineIcon_1 = require("../../CommonUI/Icon/TextUnderlineIcon");
const TextStyleButton = (0, styled_components_1.default)(core_1.Button) `
    && {
        width: 56px;
        height: 46px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: solid 1px #e6e9ed;
        border-radius: 4px;

        &:hover {
            background: #f2fafe;
        }

        &.Mui-disabled {
            background: #f2fafe;
        }
    }
`;
const PropertyEditorTextStyleSelection = (props) => {
    function handleChangeStyle(newStyle) {
        if (props.parentDefaultValue && newStyle === props.parentDefaultValue) {
            Reflect.set(props.editObject, props.propertyName, null);
        }
        else {
            Reflect.set(props.editObject, props.propertyName, newStyle);
        }
        props.updateCallback();
    }
    const value = Reflect.get(props.editObject, props.propertyName) ?? props.parentDefaultValue;
    return ((0, jsx_runtime_1.jsxs)(core_1.ButtonGroup, { size: "large", "aria-label": "large outlined primary button group", style: { height: "49px", width: "240px", marginTop: "10px" }, children: [(0, jsx_runtime_1.jsx)(TextStyleButton, { onClick: () => {
                    handleChangeStyle(FormDesignConstants_1.TextControlStyle.LABELED);
                }, disabled: value === FormDesignConstants_1.TextControlStyle.LABELED, children: (0, jsx_runtime_1.jsx)(TextLabelIcon_1.TextLabelIcon, { alt: FormDesignConstants_1.TextControlStyle.LABELED }) }), (0, jsx_runtime_1.jsx)(TextStyleButton, { onClick: () => {
                    handleChangeStyle(FormDesignConstants_1.TextControlStyle.OUTLINE);
                }, disabled: value === FormDesignConstants_1.TextControlStyle.OUTLINE, children: (0, jsx_runtime_1.jsx)(TextOutlineIcon_1.TextOutlineIcon, { alt: FormDesignConstants_1.TextControlStyle.OUTLINE }) }), (0, jsx_runtime_1.jsx)(TextStyleButton, { onClick: () => {
                    handleChangeStyle(FormDesignConstants_1.TextControlStyle.SHADED);
                }, disabled: value === FormDesignConstants_1.TextControlStyle.SHADED, children: (0, jsx_runtime_1.jsx)(TextShadedIcon_1.TextShadedIcon, { alt: FormDesignConstants_1.TextControlStyle.SHADED }) }), (0, jsx_runtime_1.jsx)(TextStyleButton, { onClick: () => {
                    handleChangeStyle(FormDesignConstants_1.TextControlStyle.UNDERLINED);
                }, disabled: value === FormDesignConstants_1.TextControlStyle.UNDERLINED, children: (0, jsx_runtime_1.jsx)(TextUnderlineIcon_1.TextUnderlineIcon, { alt: FormDesignConstants_1.TextControlStyle.UNDERLINED }) })] }));
};
exports.PropertyEditorTextStyleSelection = PropertyEditorTextStyleSelection;
const TextSizeButton = (0, styled_components_1.default)(core_1.Button) `
    && {
        width: 120px;
        height: 46px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        color: #01244E;
        border: 1px solid #E6E9ED

        &:hover {
            background: #F2FAFE;
        }

        &.Mui-disabled {
			background: #F2FAFE;
			color: black;
		}
    }

`;
const PropertyEditorTextSizeSelection = (props) => {
    function handleChangeSize(newStyle) {
        if (props.parentDefaultValue && newStyle === props.parentDefaultValue) {
            Reflect.set(props.editObject, props.propertyName, null);
        }
        else {
            Reflect.set(props.editObject, props.propertyName, newStyle);
        }
        props.updateCallback();
    }
    const value = Reflect.get(props.editObject, props.propertyName) ?? props.parentDefaultValue;
    return ((0, jsx_runtime_1.jsx)(core_1.ButtonGroup, { size: "large", "aria-label": "large outlined primary button group", style: { height: "49px", width: "240px", marginTop: "10px" }, children: (0, jsx_runtime_1.jsxs)(core_1.ButtonGroup, { size: "large", "aria-label": "large outlined primary button group", style: { height: "49px", marginTop: "10px" }, children: [(0, jsx_runtime_1.jsx)(TextSizeButton, { onClick: () => {
                        handleChangeSize(FormDesignConstants_1.TextControlSize.STANDARD);
                    }, style: { textTransform: "lowercase" }, disabled: value === FormDesignConstants_1.TextControlSize.STANDARD, children: "Standard" }), (0, jsx_runtime_1.jsx)(TextSizeButton, { onClick: () => {
                        handleChangeSize(FormDesignConstants_1.TextControlSize.SMALL);
                    }, style: { textTransform: "lowercase" }, disabled: value === FormDesignConstants_1.TextControlSize.SMALL, children: "Small" })] }) }));
};
exports.PropertyEditorTextSizeSelection = PropertyEditorTextSizeSelection;
//# sourceMappingURL=TextSelectionButtonGroups.js.map