"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ValidationErrorRender = exports.ValidationError = 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 IDesignValidationProvider_1 = require("@appglue/common/dist/Common/IDesignValidationProvider");
const AttentionIcon_1 = require("../../CommonUI/Icon/AttentionIcon");
const ExpressionReactContext_1 = require("../Structure/ExpressionReactContext");
const ExpressionValueType_1 = require("@appglue/common/dist/Expressions/ExpressionValueType");
const UIStyleConstants_1 = require("@appglue/common/src/Common/UIStyleConstants");
const ValidationError = (props) => {
    const context = react_1.default.useContext(ExpressionReactContext_1.ExpressionReactContext);
    let position = {};
    let issues = props.value.getValidationIssues();
    if (issues.length === 0)
        return null;
    if ((context.renderType === ExpressionReactContext_1.ExpressionRenderType.COMPACT || context.renderType === ExpressionReactContext_1.ExpressionRenderType.TEXT) &&
        context.hideValidation) {
        return null;
    }
    switch (props.value.valueType) {
        case ExpressionValueType_1.ExpressionValueType.VALUE:
            position = {
                top: -5,
                right: -5,
            };
            break;
        case ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION:
            position = {
                top: 0,
                right: context.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL ? -10 : -2,
            };
            break;
        case ExpressionValueType_1.ExpressionValueType.VARIABLE:
            position = {
                top: 0,
                right: context.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL ? -10 : -2,
            };
            break;
        case ExpressionValueType_1.ExpressionValueType.UNSET:
            position = {
                top: -5,
                right: -10,
            };
            break;
    }
    return ((0, jsx_runtime_1.jsxs)(exports.ValidationErrorRender, { position: props.position || position, children: [!props.hideErrorMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ErrorMessageRender, { className: "ExpressionValidation-errorMessage", type: issues[0].level, renderType: context.renderType, children: issues[0].issue }), (0, jsx_runtime_1.jsx)(ErrorBorderRender, { className: "ExpressionValidation-border", type: issues[0].level, renderType: context.renderType })] })), (0, jsx_runtime_1.jsx)(AttentionIcon_1.AttentionIcon, {})] }));
};
exports.ValidationError = ValidationError;
exports.ValidationErrorRender = styled_components_1.default.div `
    img {
        position: absolute;

        ${(props) => props.position
    ? `
                    ${props.position.top !== undefined ? `top: ${props.position.top}px;` : ``}
                    ${props.position.left !== undefined ? `left: ${props.position.left}px;` : ``}
                    ${props.position.bottom !== undefined ? `bottom: ${props.position.bottom}px;` : ``}
                    ${props.position.right !== undefined ? `right: ${props.position.right}px;` : ``}
                `
    : ``}
        width: 8px;
        height: 18px;
    }

    .ExpressionValidation-errorMessage,
    .ExpressionValidation-border {
        opacity: 0;
        z-index: -1;
    }

    &:hover {
        .ExpressionValidation-errorMessage,
        .ExpressionValidation-border {
            opacity: 1;
            z-index: 1;
        }
    }
`;
const ErrorMessageRender = styled_components_1.default.div `
    font-size: 8px;
    font-style: normal;
    font-weight: 500;
    line-height: 10px;
    letter-spacing: 0.1px;
    text-align: left;

    white-space: pre;

    z-index: 2;

    position: absolute;
    top: calc(100% + ${(props) => (props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL ? "6px" : "3px")});
    left: 0;
    color: ${(props) => (props.type === IDesignValidationProvider_1.ValidationLevel.ERROR ? UIStyleConstants_1.UIStyleConstants.RED_COLOR : "#F4955F")};
`;
const ErrorBorderRender = styled_components_1.default.div `
    position: absolute;
    top: ${(props) => (props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL ? "-5px" : "-2px")};
    left: ${(props) => (props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL ? "-5px" : "-2px")};
    bottom: ${(props) => (props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL ? "-5px" : "-2px")};
    right: ${(props) => (props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL ? "-5px" : "-2px")};

    border: ${(props) => (props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL ? "2px" : "1px")} solid
        ${(props) => (props.type === IDesignValidationProvider_1.ValidationLevel.ERROR ? UIStyleConstants_1.UIStyleConstants.RED_COLOR : "#F4955F")};
    box-sizing: border-box;
    border-radius: ${(props) => (props.renderType === ExpressionReactContext_1.ExpressionRenderType.FULL ? "8px" : "4px")}; ;
`;
//# sourceMappingURL=ValidationError.js.map