"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ValueTableResultDefaultCell = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
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 ObserveMultiState_1 = require("../../../../CommonUI/StateManagement/ObserveMultiState");
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 UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const ValueTableResultDefaultCell = (props) => {
    const { editContext, resultColumn, ruleDefinition } = props;
    const defaultResult = ruleDefinition.getDefaultResultByColumnId(resultColumn._id);
    if (!defaultResult)
        return null;
    const onSelect = () => {
        editContext.selectedCell = defaultResult;
    };
    return ((0, jsx_runtime_1.jsx)(TableRowTestContext_1.TableRowTestContext.Consumer, { children: (value) => ((0, jsx_runtime_1.jsx)(ObserveMultiState_1.ObserveMultiState, { listenTo: [defaultResult, resultColumn], control: () => {
                return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: editContext, properties: ["selectedCell"], control: () => {
                        let selected = editContext.selectedCell === defaultResult;
                        let issues = defaultResult.validateCellData(ruleDefinition.getResultColumnType(resultColumn) ||
                            DataUtilities_1.DataUtilities.createDataByType(resultColumn.dataType, resultColumn.name));
                        return ((0, jsx_runtime_1.jsxs)(DefaultResultCellRender, { "data-testid": `column_${resultColumn._id}`, selected: selected, onClick: onSelect, testValue: value, children: [(0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { forData: ruleDefinition.getResultColumnType(resultColumn) ||
                                        DataUtilities_1.DataUtilities.createDataByType(resultColumn.dataType, resultColumn.name), value: defaultResult.value, mode: resultColumn.dataType === DataTypes_1.DataTypes.FILE
                                        ? "display_mode_edit"
                                        : selected
                                            ? "edit_mode"
                                            : "display_mode", navigate: editContext.navigate, onUpdate: (newValue) => {
                                        defaultResult.value = newValue;
                                        StateManager_1.StateManager.propertyChanged(defaultResult, "values");
                                        StateManager_1.StateManager.changed(ruleDefinition);
                                    }, 
                                    // navigate={navigate}
                                    editMode: resultColumn.dataType === DataTypes_1.DataTypes.FILE ? "layer" : "inline" }), (0, jsx_runtime_1.jsx)(Error_1.Error, { issues: issues })] }));
                    } }));
            } })) }));
};
exports.ValueTableResultDefaultCell = ValueTableResultDefaultCell;
const DefaultResultCellRender = 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}` : `border: 1px solid #F1F1F6`)};

    .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=ValueTableResultDefaultCell.js.map