import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ClickAwayListener, FormControl, FormControlLabel, Radio, RadioGroup, Typography } from "@material-ui/core";
import styled from "styled-components";
import { ObserveState } from "../../../../CommonUI/StateManagement/ObserveState";
import { ValueRuleCellType } from "../ValueRuleCell";
import { CloseGrayIcon } from "../../../../CommonUI/Icon/CloseGrayIcon";
import { StateManager } from "../../../../CommonUI/StateManagement/StateManager";
export const ValueTableRuleCellSetting = (props) => {
    const { editContext, cell } = props;
    const closeCellSettings = () => {
        editContext.selectedCellForSettings = undefined;
    };
    const handleChange = (event) => {
        let type = event.target.value;
        cell.cellType = type;
        closeCellSettings();
        StateManager.propertyChanged(cell, "values");
    };
    return (_jsx(ObserveState, { listenTo: editContext, properties: ["selectedCellForSettings"], control: () => {
            if (editContext.selectedCellForSettings !== cell)
                return null;
            return (_jsx(ValueTableRuleCellSettingDiv, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: closeCellSettings }, { children: _jsxs(Wrapper, { children: [_jsx(Typography, Object.assign({ variant: "body1", classes: { root: "CellSetting-body" } }, { children: "Cell Settings" }), void 0),
                            _jsx(ClosedButton, Object.assign({ onClick: () => {
                                    editContext.selectedCellForSettings = undefined;
                                } }, { children: _jsx(CloseGrayIcon, {}, void 0) }), void 0),
                            _jsxs("div", Object.assign({ className: "radio-wrapper" }, { children: [_jsx(FormControl, Object.assign({ component: "fieldset" }, { children: _jsxs(RadioGroup, Object.assign({ "aria-label": "gender", name: "cellType", value: cell.cellType, onChange: handleChange }, { children: [_jsx(FormControlLabel, { value: ValueRuleCellType.SINGLE, control: _jsx(Radio, { size: "small", color: "primary" }, void 0), label: "Single parameter", classes: { root: "CellSetting-radioLabel" } }, void 0),
                                                _jsx(FormControlLabel, { value: ValueRuleCellType.MULTIPLE, control: _jsx(Radio, { size: "small", color: "primary" }, void 0), label: "Multiple parameters", classes: { root: "CellSetting-radioLabel" } }, void 0),
                                                _jsx(FormControlLabel, { value: ValueRuleCellType.IGNORE, control: _jsx(Radio, { size: "small", color: "primary" }, void 0), label: "Any value", classes: { root: "CellSetting-radioLabel" } }, void 0),
                                                _jsx(FormControlLabel, { value: ValueRuleCellType.MISSING, control: _jsx(Radio, { size: "small", color: "primary" }, void 0), label: "Value is missing", classes: { root: "CellSetting-radioLabel" } }, void 0)] }), void 0) }), void 0),
                                    _jsx(Typography, Object.assign({ variant: "body1", classes: { root: "CellSetting-description" } }, { children: "To create a new parameter, press \"Enter\" in the cell field, and a new variable will be created which you can set the parameter." }), void 0)] }), void 0)] }, void 0) }), void 0) }, void 0));
        } }, void 0));
};
const ValueTableRuleCellSettingDiv = styled.div `
    position: absolute;
    top: 5px;
    left: -5px;
    background: #ffffff;
    border: 1px solid #f1f1f6;
    box-sizing: border-box;
    box-shadow: 0px 6px 8px -2px rgba(39, 41, 50, 0.08);
    border-radius: 4px;
    z-index: 2;

    .CellSetting-body {
        color: #272932;
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 17px;
        letter-spacing: 0px;
        text-align: left;
        margin-bottom: 18px;
    }

    .CellSetting-radioLabel .MuiTypography-body1 {
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0em;
        text-align: left;
        color: #272932;
    }

    .CellSetting-description {
        font-family: Inter;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px;
        letter-spacing: 0em;
        text-align: left;
        margin-top: 18px;
        color: #606881;
    }
`;
const Wrapper = styled.div `
    position: relative;
    padding: 16px;
    width: 220px;
`;
const ClosedButton = styled.div `
    width: 24px;
    height: 24px;
    position: absolute;
    right: 4px;
    top: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
`;
//# sourceMappingURL=ValueTableRuleCellSetting.js.map