import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { FileDataDefinition } from "../../../../Common/Data/Definitions/FileDataDefinition";
import { XValueEditor } from "../../../../CommonUI/DataEditing";
import { DropdownOpenIcon } from "../../../../CommonUI/Icon/DropdownOpenIcon";
import { ObserveMultiState } from "../../../../CommonUI/StateManagement/ObserveMultiState";
import { ObserveState } from "../../../../CommonUI/StateManagement/ObserveState";
import { StateManager } from "../../../../CommonUI/StateManagement/StateManager";
import { StyledEditButton } from "../../../DesignUI/EditButton";
import { ValueRuleCell } from "../ValueRuleCell";
import { ValueTableRuleCellSetting } from "./ValueTableRuleCellSetting";
import { Error } from "../../CommonUI/Error";
import { TestContext } from "../../../../Tester/TestContext";
import { AttentionIcon } from "../../../../CommonUI/Icon/AttentionIcon";
import { Tooltip } from "@material-ui/core";
import { DataUtilities } from "../../../../Common/DataUtilities";
import { CellValuesRenderInTester, CellValueLine, CellTestResultError } from "../../../DesignUI/CommonStyles";
import { TestingConstants } from "../../../../CommonUI/Testing/TestingConstants";
export const XValueTableRuleCell = (props) => {
    const { editContext, cell, ruleDefinition, rowIndex, cellIndex } = props;
    const testContext = React.useContext(TestContext);
    const ruleColumn = ruleDefinition.getColumnById(cell._columnId);
    const row = ruleDefinition.rows[rowIndex];
    const rowTestResult = testContext === null || testContext === void 0 ? void 0 : testContext.findItem(row._id);
    const cellTestResult = rowTestResult === null || rowTestResult === void 0 ? void 0 : rowTestResult.findItem(`${row._id}-${cell._columnId}`);
    const onSettings = (event) => {
        event.stopPropagation();
        editContext.selectedCellForSettings = cell;
    };
    const onSelect = () => {
        if (testContext)
            return;
        editContext.selectedCell = cell;
    };
    if (!ruleColumn)
        return null;
    const renderCell = () => {
        let selected = editContext.selectedCell === cell;
        function getValueStr(value) {
            if (typeof value === "object") {
                if (value.file && value.file instanceof File) {
                    return value.file.name;
                }
                return DataUtilities.getObjectDisplayText(value);
            }
            return value.toString();
        }
        if (cell.values !== ValueRuleCell.IGNORE_CELL_VALUE) {
            if (testContext) {
                if (Array.isArray(cell.values)) {
                    return (_jsxs(CellValuesRenderInTester, Object.assign({ isError: cellTestResult === null || cellTestResult === void 0 ? void 0 : cellTestResult.isError }, { children: [cell.values.map((v, index) => {
                                let currentItem;
                                if (cellTestResult && cellTestResult.items[index]) {
                                    currentItem = cellTestResult.items[index];
                                }
                                return (_jsx(CellValueLine, Object.assign({ testResult: currentItem === null || currentItem === void 0 ? void 0 : currentItem.result }, { children: getValueStr(v) }), index));
                            }),
                            (cellTestResult === null || cellTestResult === void 0 ? void 0 : cellTestResult.isError) && (_jsx(CellTestResultError, Object.assign({ "data-testid": "ValueRuleCell-error" }, { children: _jsx(Tooltip, Object.assign({ title: (cellTestResult === null || cellTestResult === void 0 ? void 0 : cellTestResult.result) || "" }, { children: _jsx(AttentionIcon, {}, void 0) }), void 0) }), void 0))] }), void 0));
                }
                else {
                    return (_jsxs(CellValuesRenderInTester, Object.assign({ isError: cellTestResult === null || cellTestResult === void 0 ? void 0 : cellTestResult.isError }, { children: [cell.values !== ValueRuleCell.MISSING_CELL_VALUE && (_jsx(CellValueLine, Object.assign({ testResult: cellTestResult === null || cellTestResult === void 0 ? void 0 : cellTestResult.result }, { children: getValueStr(cell.values) }), void 0)),
                            (cellTestResult === null || cellTestResult === void 0 ? void 0 : cellTestResult.isError) && (_jsx(Tooltip, Object.assign({ title: (cellTestResult === null || cellTestResult === void 0 ? void 0 : cellTestResult.result) || "" }, { children: _jsx(CellTestResultError, Object.assign({ "data-testid": "ValueRuleCell-error" }, { children: _jsx(AttentionIcon, {}, void 0) }), void 0) }), void 0))] }), void 0));
                }
            }
            return (_jsx(XValueEditor, { forData: ruleDefinition.getCellDataDef(cell), value: cell.values, mode: ruleColumn.cellData instanceof FileDataDefinition
                    ? "display_mode_edit"
                    : selected
                        ? "edit_mode"
                        : "display_mode", onUpdate: (newValue) => {
                    cell.values = newValue;
                    StateManager.propertyChanged(cell, "values");
                    StateManager.changed(ruleDefinition);
                }, navigate: editContext.navigate, editMode: ruleColumn.cellData instanceof FileDataDefinition ? "layer" : "inline" }, void 0));
        }
        return _jsx(ConstantValue, { children: cell.values }, void 0);
    };
    return (_jsx(ObserveMultiState, { listenTo: [cell, ruleColumn], control: () => {
            return (_jsx(ObserveState, { listenTo: editContext, properties: ["selectedCell"], control: () => {
                    let selected = editContext.selectedCell === cell;
                    const validationIssues = cell.validateCellData(ruleColumn.cellData);
                    return (_jsxs(ValueTableRuleColumnRender, Object.assign({ onClick: onSelect, "data-testid": `column_${ruleColumn._id}-${rowIndex}`, selected: selected, testResult: cellTestResult === null || cellTestResult === void 0 ? void 0 : cellTestResult.result, x: cellIndex + 1, y: rowIndex + 3 }, { children: [_jsx(Error, { issues: validationIssues }, void 0), renderCell(), !testContext && (_jsxs(_Fragment, { children: [_jsx(StyledEditButton, Object.assign({ onClick: onSettings, className: "edit-button" }, { children: _jsx(DropdownOpenIcon, {}, void 0) }), void 0),
                                    _jsx(ValueTableRuleCellSetting, { cell: cell, editContext: editContext, ruleDefinition: ruleDefinition }, void 0)] }, void 0))] }), void 0));
                } }, void 0));
        } }, void 0));
};
export const ValueTableRuleColumnRender = 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.testResult === "false"
        ? `border: 1px solid ${TestingConstants.BORDER_FAIL};`
        : props.testResult === "true"
            ? `border: 1px solid ${TestingConstants.BORDER_SUCCESS};`
            : `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;
        }
    }

    .edit-button {
        opacity: 0;
    }

    &:hover {
        .edit-button {
            opacity: 1;
        }
    }
`;
const ConstantValue = styled.div `
    padding: 6px 12px;
`;
//# sourceMappingURL=ValueTableRuleCell.js.map