"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ValueTableRuleCellSetting = 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 ObserveState_1 = require("../../../../CommonUI/StateManagement/ObserveState");
const ValueRuleCell_1 = require("@appglue/common/dist/Rule/Table/Value/Structure/ValueRuleCell");
const CloseGrayIcon_1 = require("../../../../CommonUI/Icon/CloseGrayIcon");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
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_1.StateManager.propertyChanged(cell, "values");
    };
    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: editContext, properties: ["selectedCellForSettings"], control: () => {
            if (editContext.selectedCellForSettings !== cell)
                return null;
            return ((0, jsx_runtime_1.jsx)(ValueTableRuleCellSettingDiv, { children: (0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: closeCellSettings, children: (0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "body1", classes: { root: "CellSetting-body" }, children: "Cell Settings" }), (0, jsx_runtime_1.jsx)(ClosedButton, { onClick: () => {
                                    editContext.selectedCellForSettings = undefined;
                                }, children: (0, jsx_runtime_1.jsx)(CloseGrayIcon_1.CloseGrayIcon, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "radio-wrapper", children: [(0, jsx_runtime_1.jsx)(core_1.FormControl, { component: "fieldset", children: (0, jsx_runtime_1.jsxs)(core_1.RadioGroup, { "aria-label": "gender", name: "cellType", value: cell.cellType, onChange: handleChange, children: [(0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { value: ValueRuleCell_1.ValueRuleCellType.SINGLE, control: (0, jsx_runtime_1.jsx)(core_1.Radio, { size: "small", color: "primary" }), label: "Single parameter", classes: { root: "CellSetting-radioLabel" } }), (0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { value: ValueRuleCell_1.ValueRuleCellType.MULTIPLE, control: (0, jsx_runtime_1.jsx)(core_1.Radio, { size: "small", color: "primary" }), label: "Multiple parameters", classes: { root: "CellSetting-radioLabel" } }), (0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { value: ValueRuleCell_1.ValueRuleCellType.IGNORE, control: (0, jsx_runtime_1.jsx)(core_1.Radio, { size: "small", color: "primary" }), label: "Any value", classes: { root: "CellSetting-radioLabel" } }), (0, jsx_runtime_1.jsx)(core_1.FormControlLabel, { value: ValueRuleCell_1.ValueRuleCellType.MISSING, control: (0, jsx_runtime_1.jsx)(core_1.Radio, { size: "small", color: "primary" }), label: "Value is missing", classes: { root: "CellSetting-radioLabel" } })] }) }), (0, jsx_runtime_1.jsx)(core_1.Typography, { 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." })] })] }) }) }));
        } }));
};
exports.ValueTableRuleCellSetting = ValueTableRuleCellSetting;
const ValueTableRuleCellSettingDiv = styled_components_1.default.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-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-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0em;
        text-align: left;
        color: #272932;
    }

    .CellSetting-description {
        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_components_1.default.div `
    position: relative;
    padding: 16px;
    width: 220px;
`;
const ClosedButton = styled_components_1.default.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