"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ValueTableRuleColumnRender = exports.XValueTableRuleCell = 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 FileDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/FileDataDefinition");
const DataEditing_1 = require("../../../../CommonUI/DataEditing");
const DropdownOpenIcon_1 = require("../../../../CommonUI/Icon/DropdownOpenIcon");
const ObserveMultiState_1 = require("../../../../CommonUI/StateManagement/ObserveMultiState");
const ObserveState_1 = require("../../../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const EditButton_1 = require("../../../DesignUI/EditButton");
const ValueRuleCell_1 = require("@appglue/common/dist/Rule/Table/Value/Structure/ValueRuleCell");
const ValueTableRuleCellSetting_1 = require("./ValueTableRuleCellSetting");
const Error_1 = require("../../CommonUI/Error");
const TestContext_1 = require("../../../../CommonUI/Testing/TestContext");
const AttentionIcon_1 = require("../../../../CommonUI/Icon/AttentionIcon");
const core_1 = require("@material-ui/core");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const CommonStyles_1 = require("../../../DesignUI/CommonStyles");
const TestingConstants_1 = require("../../../../CommonUI/Testing/TestingConstants");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const XValueTableRuleCell = (props) => {
    const { editContext, cell, ruleDefinition, rowIndex, cellIndex } = props;
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    const ruleColumn = ruleDefinition.getColumnById(cell._columnId);
    const row = ruleDefinition.rows[rowIndex];
    const rowTestResult = testContext?.findItem(row._id);
    const cellTestResult = 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_1.DataUtilities.getObjectDisplayText(value);
            }
            return value.toString();
        }
        if (cell.values !== ValueRuleCell_1.ValueRuleCell.IGNORE_CELL_VALUE) {
            if (testContext) {
                if (Array.isArray(cell.values)) {
                    return ((0, jsx_runtime_1.jsxs)(CommonStyles_1.CellValuesRenderInTester, { isError: cellTestResult?.isError, children: [cell.values.map((v, index) => {
                                let currentItem;
                                if (cellTestResult && cellTestResult.items[index]) {
                                    currentItem = cellTestResult.items[index];
                                }
                                return ((0, jsx_runtime_1.jsx)(CommonStyles_1.CellValueLine, { testResult: currentItem?.result, children: getValueStr(v) }, index));
                            }), cellTestResult?.isError && ((0, jsx_runtime_1.jsx)(CommonStyles_1.CellTestResultError, { "data-testid": "ValueRuleCell-error", children: (0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: cellTestResult?.result || "", children: (0, jsx_runtime_1.jsx)(AttentionIcon_1.AttentionIcon, {}) }) }))] }));
                }
                else {
                    return ((0, jsx_runtime_1.jsxs)(CommonStyles_1.CellValuesRenderInTester, { isError: cellTestResult?.isError, children: [cell.values !== ValueRuleCell_1.ValueRuleCell.MISSING_CELL_VALUE && ((0, jsx_runtime_1.jsx)(CommonStyles_1.CellValueLine, { testResult: cellTestResult?.result, children: getValueStr(cell.values) })), cellTestResult?.isError && ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: cellTestResult?.result || "", children: (0, jsx_runtime_1.jsx)(CommonStyles_1.CellTestResultError, { "data-testid": "ValueRuleCell-error", children: (0, jsx_runtime_1.jsx)(AttentionIcon_1.AttentionIcon, {}) }) }))] }));
                }
            }
            return ((0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { forData: ruleDefinition.getCellDataDef(cell), value: cell.values, mode: ruleColumn.cellData instanceof FileDataDefinition_1.FileDataDefinition
                    ? "display_mode_edit"
                    : selected
                        ? "edit_mode"
                        : "display_mode", onUpdate: (newValue) => {
                    cell.values = newValue;
                    StateManager_1.StateManager.propertyChanged(cell, "values");
                    StateManager_1.StateManager.changed(ruleDefinition);
                }, navigate: editContext.navigate, editMode: ruleColumn.cellData instanceof FileDataDefinition_1.FileDataDefinition ? "layer" : "inline" }));
        }
        return (0, jsx_runtime_1.jsx)(ConstantValue, { children: cell.values });
    };
    return ((0, jsx_runtime_1.jsx)(ObserveMultiState_1.ObserveMultiState, { listenTo: [cell, ruleColumn], control: () => {
            return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: editContext, properties: ["selectedCell"], control: () => {
                    let selected = editContext.selectedCell === cell;
                    const validationIssues = cell.validateCellData(ruleColumn.cellData);
                    return ((0, jsx_runtime_1.jsxs)(exports.ValueTableRuleColumnRender, { onClick: onSelect, "data-testid": `column_${ruleColumn._id}-${rowIndex}`, selected: selected, testResult: cellTestResult?.result, x: cellIndex + 1, y: rowIndex + 3, children: [(0, jsx_runtime_1.jsx)(Error_1.Error, { issues: validationIssues }), renderCell(), !testContext && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EditButton_1.StyledEditButton, { onClick: onSettings, className: "edit-button", children: (0, jsx_runtime_1.jsx)(DropdownOpenIcon_1.DropdownOpenIcon, {}) }), (0, jsx_runtime_1.jsx)(ValueTableRuleCellSetting_1.ValueTableRuleCellSetting, { cell: cell, editContext: editContext, ruleDefinition: ruleDefinition })] }))] }));
                } }));
        } }));
};
exports.XValueTableRuleCell = XValueTableRuleCell;
exports.ValueTableRuleColumnRender = styled_components_1.default.div `
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;

  background: #fff;
  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.testResult === "false"
        ? `border: 1px solid ${TestingConstants_1.TestingConstants.BORDER_FAIL};`
        : props.testResult === "true"
            ? `border: 1px solid ${TestingConstants_1.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_components_1.default.div `
  padding: 6px 12px;
`;
//# sourceMappingURL=ValueTableRuleCell.js.map