import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, ButtonGroup } from "@material-ui/core";
import styled from "styled-components";
import { TextControlSize, TextControlStyle } from "../../Form/FormDesignConstants";
import { TextLabelIcon } from "../../CommonUI/Icon/TextLabelIcon";
import { TextOutlineIcon } from "../../CommonUI/Icon/TextOutlineIcon";
import { TextShadedIcon } from "../../CommonUI/Icon/TextShadedIcon";
import { TextUnderlineIcon } from "../../CommonUI/Icon/TextUnderlineIcon";
const TextStyleButton = styled(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;
        }
    }
`;
export const PropertyEditorTextStyleSelection = (props) => {
    var _a;
    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 = (_a = Reflect.get(props.editObject, props.propertyName)) !== null && _a !== void 0 ? _a : props.parentDefaultValue;
    return (_jsxs(ButtonGroup, Object.assign({ size: "large", "aria-label": "large outlined primary button group", style: { height: "49px", width: "240px", marginTop: "10px" } }, { children: [_jsx(TextStyleButton, Object.assign({ onClick: () => {
                    handleChangeStyle(TextControlStyle.LABELED);
                }, disabled: value === TextControlStyle.LABELED }, { children: _jsx(TextLabelIcon, { alt: TextControlStyle.LABELED }, void 0) }), void 0),
            _jsx(TextStyleButton, Object.assign({ onClick: () => {
                    handleChangeStyle(TextControlStyle.OUTLINE);
                }, disabled: value === TextControlStyle.OUTLINE }, { children: _jsx(TextOutlineIcon, { alt: TextControlStyle.OUTLINE }, void 0) }), void 0),
            _jsx(TextStyleButton, Object.assign({ onClick: () => {
                    handleChangeStyle(TextControlStyle.SHADED);
                }, disabled: value === TextControlStyle.SHADED }, { children: _jsx(TextShadedIcon, { alt: TextControlStyle.SHADED }, void 0) }), void 0),
            _jsx(TextStyleButton, Object.assign({ onClick: () => {
                    handleChangeStyle(TextControlStyle.UNDERLINED);
                }, disabled: value === TextControlStyle.UNDERLINED }, { children: _jsx(TextUnderlineIcon, { alt: TextControlStyle.UNDERLINED }, void 0) }), void 0)] }), void 0));
};
const TextSizeButton = styled(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;
		}
    }

`;
export const PropertyEditorTextSizeSelection = (props) => {
    var _a;
    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 = (_a = Reflect.get(props.editObject, props.propertyName)) !== null && _a !== void 0 ? _a : props.parentDefaultValue;
    return (_jsx(ButtonGroup, Object.assign({ size: "large", "aria-label": "large outlined primary button group", style: { height: "49px", width: "240px", marginTop: "10px" } }, { children: _jsxs(ButtonGroup, Object.assign({ size: "large", "aria-label": "large outlined primary button group", style: { height: "49px", marginTop: "10px" } }, { children: [_jsx(TextSizeButton, Object.assign({ onClick: () => {
                        handleChangeSize(TextControlSize.STANDARD);
                    }, style: { textTransform: "lowercase" }, disabled: value === TextControlSize.STANDARD }, { children: "Standard" }), void 0),
                _jsx(TextSizeButton, Object.assign({ onClick: () => {
                        handleChangeSize(TextControlSize.SMALL);
                    }, style: { textTransform: "lowercase" }, disabled: value === TextControlSize.SMALL }, { children: "Small" }), void 0)] }), void 0) }), void 0));
};
//# sourceMappingURL=TextSelectionButtonGroups.js.map