import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { XDataType } from "../../../Common/Data/XDataType";
import { DataUtilities } from "../../../Common/DataUtilities";
import { XValueEditor } from "../../../CommonUI/DataEditing";
import { ObserveState } from "../../../CommonUI/StateManagement/ObserveState";
import { StateManager } from "../../../CommonUI/StateManagement/StateManager";
import { Error } from "../CommonUI/Error";
import { ITableRowTestValue, TableRowTestContext } from "../Common/TableRowTestContext";
import { TestingConstants } from "../../../CommonUI/Testing/TestingConstants";
export const XResultCell = ({ ruleDefinition, editContext, resultCell, resultColumn, cellIndex, rowIndex, }) => {
    const value = React.useContext(TableRowTestContext);
    return (_jsx(ObserveState, { listenTo: editContext, properties: ["selectedCell"], control: () => {
            let selected = editContext.isSelected(resultCell);
            let validationIssues = ruleDefinition.getResultCellValidationIssues(resultCell);
            return (_jsxs(ResultCellRender, Object.assign({ onClick: (event) => {
                    event.stopPropagation();
                    editContext.setSelected(resultCell);
                }, selected: editContext.isSelected(resultCell), testValue: value, x: cellIndex, y: rowIndex }, { children: [_jsx(XValueEditor, { forData: ruleDefinition.getResultColumnType(resultColumn) ||
                            DataUtilities.createDataByType(resultColumn.dataType, resultColumn.name), value: resultCell.value, onUpdate: (newValue) => {
                            resultCell.value = newValue;
                            StateManager.propertyChanged(resultCell, "value");
                            StateManager.changed(ruleDefinition);
                        }, mode: resultColumn.dataType === XDataType.FILE
                            ? "display_mode_edit"
                            : selected
                                ? "edit_mode"
                                : "display_mode", navigate: editContext.navigate, editMode: resultColumn.dataType === XDataType.FILE ? "layer" : "inline" }, void 0),
                    _jsx(Error, { issues: validationIssues }, void 0)] }), void 0));
        } }, void 0));
};
const ResultCellRender = styled.div `
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;

    background: #fff;
    border-radius: 2px;
    position: relative;

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

    color: rgba(39, 41, 50, 0.3);

    ${(props) => props.selected
    ? `border: 1px solid #3E9BDE`
    : props.testValue === ITableRowTestValue.PASSED
        ? `border: 1px solid ${TestingConstants.BORDER_SUCCESS}`
        : props.testValue === ITableRowTestValue.FAILED
            ? `border: 1px solid ${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 === ITableRowTestValue.PASSED
    ? ` color: rgba(53, 182, 135);`
    : props.testValue === ITableRowTestValue.FAILED
        ? `
                        color: rgb(238, 62, 84);
                        text-decoration: line-through;
                    `
        : ``}
        }
    }

    .edit-button {
        opacity: 0;
    }

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