"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XResultCell = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DataTypes_1 = require("@appglue/common/dist/Common/Data/DataTypes");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const DataEditing_1 = require("../../../CommonUI/DataEditing");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const Error_1 = require("../CommonUI/Error");
const TableRowTestContext_1 = require("@appglue/common/dist/Rule/Table/Common/TableRowTestContext");
const TestingConstants_1 = require("../../../CommonUI/Testing/TestingConstants");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const XResultCell = ({ ruleDefinition, editContext, resultCell, resultColumn, cellIndex, rowIndex, }) => {
    const value = react_1.default.useContext(TableRowTestContext_1.TableRowTestContext);
    return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: editContext, properties: ["selectedCell"], control: () => {
            let selected = editContext.isSelected(resultCell);
            let validationIssues = ruleDefinition.getResultCellValidationIssues(resultCell);
            return ((0, jsx_runtime_1.jsxs)(ResultCellRender, { onClick: (event) => {
                    event.stopPropagation();
                    editContext.setSelected(resultCell);
                }, selected: editContext.isSelected(resultCell), testValue: value, x: cellIndex, y: rowIndex, children: [(0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { forData: ruleDefinition.getResultColumnType(resultColumn) ||
                            DataUtilities_1.DataUtilities.createDataByType(resultColumn.dataType, resultColumn.name), value: resultCell.value, onUpdate: (newValue) => {
                            resultCell.value = newValue;
                            StateManager_1.StateManager.propertyChanged(resultCell, "value");
                            StateManager_1.StateManager.changed(ruleDefinition);
                        }, mode: resultColumn.dataType === DataTypes_1.DataTypes.FILE
                            ? "display_mode_edit"
                            : selected
                                ? "edit_mode"
                                : "display_mode", navigate: editContext.navigate, editMode: resultColumn.dataType === DataTypes_1.DataTypes.FILE ? "layer" : "inline" }), (0, jsx_runtime_1.jsx)(Error_1.Error, { issues: validationIssues })] }));
        } }));
};
exports.XResultCell = XResultCell;
const ResultCellRender = styled_components_1.default.div `
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;

    background: ${UIStyleConstants_1.UIStyleConstants.WHITE_COLOR};
    border-radius: 2px;
    position: relative;

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: left;

    color: ${UIStyleConstants_1.UIStyleConstants.GRAY_DARK_COLOR};

    ${(props) => props.selected
    ? `border: 1px solid ${UIStyleConstants_1.UIStyleConstants.BLUE_GRAY_COLOR}`
    : props.testValue === TableRowTestContext_1.ITableRowTestValue.PASSED
        ? `border: 1px solid ${TestingConstants_1.TestingConstants.BORDER_SUCCESS}`
        : props.testValue === TableRowTestContext_1.ITableRowTestValue.FAILED
            ? `border: 1px solid ${TestingConstants_1.TestingConstants.BORDER_FAIL}`
            : `border: 1px solid #F1F1F6`};

    ${(props) => props.x !== undefined
    ? `
                grid-column-start: ${props.x + 1};
                grid-column-end: ${props.x + 2};
            `
    : ``}
    ${(props) => props.y !== undefined
    ? `
                grid-row-start: ${props.y + 1};
                grid-row-end: ${props.y + 2};
            `
    : ``}
  .ValueEditor-root {
        width: 100%;
        padding: 6px 4px;

        .ValueEditor-display {
            padding: 6px 12px;

            ${(props) => props.testValue === TableRowTestContext_1.ITableRowTestValue.PASSED
    ? ` color: rgba(53, 182, 135);`
    : props.testValue === TableRowTestContext_1.ITableRowTestValue.FAILED
        ? `
                        color: rgb(238, 62, 84);
                        text-decoration: line-through;
                    `
        : ``}
        }
    }

    .edit-button {
        opacity: 0;
    }

    &:hover {
        .edit-button {
            opacity: 1;
        }
    }
`;
//# sourceMappingURL=XResultCell.js.map