import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { ValidationLevel } from "../../Common/IDesignValidationProvider";
import { AttentionIcon } from "../../CommonUI/Icon/AttentionIcon";
import { ExpressionContext, ExpressionRenderType } from "../ExpressionContext";
import { ExpressionValueType } from "../ExpressionValueType";
export const ValidationError = (props) => {
    const context = React.useContext(ExpressionContext);
    let position = {};
    let issues = props.value.getValidationIssues();
    if (issues.length === 0)
        return null;
    if ((context.renderType === ExpressionRenderType.COMPACT || context.renderType === ExpressionRenderType.TEXT) &&
        context.hideValidation) {
        return null;
    }
    switch (props.value.valueType) {
        case ExpressionValueType.VALUE:
            position = {
                top: -5,
                right: -5,
            };
            break;
        case ExpressionValueType.SUBEXPRESSION:
            position = {
                top: 0,
                right: context.renderType === ExpressionRenderType.FULL ? -10 : -2,
            };
            break;
        case ExpressionValueType.VARIABLE:
            position = {
                top: 0,
                right: context.renderType === ExpressionRenderType.FULL ? -10 : -2,
            };
            break;
        case ExpressionValueType.UNSET:
            position = {
                top: -5,
                right: -10,
            };
            break;
    }
    return (_jsxs(ValidationErrorRender, Object.assign({ position: props.position || position }, { children: [!props.hideErrorMessage && (_jsxs(_Fragment, { children: [_jsx(ErrorMessageRender, Object.assign({ className: "ExpressionValidation-errorMessage", type: issues[0].level, renderType: context.renderType }, { children: issues[0].issue }), void 0),
                    _jsx(ErrorBorderRender, { className: "ExpressionValidation-border", type: issues[0].level, renderType: context.renderType }, void 0)] }, void 0)),
            _jsx(AttentionIcon, {}, void 0)] }), void 0));
};
export const ValidationErrorRender = styled.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.div `
    font-family: Inter;
    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 === ExpressionRenderType.FULL ? "6px" : "3px")});
    left: 0;
    color: ${(props) => (props.type === ValidationLevel.ERROR ? "#ee3e54" : "#F4955F")};
`;
const ErrorBorderRender = styled.div `
    position: absolute;
    top: ${(props) => (props.renderType === ExpressionRenderType.FULL ? "-5px" : "-2px")};
    left: ${(props) => (props.renderType === ExpressionRenderType.FULL ? "-5px" : "-2px")};
    bottom: ${(props) => (props.renderType === ExpressionRenderType.FULL ? "-5px" : "-2px")};
    right: ${(props) => (props.renderType === ExpressionRenderType.FULL ? "-5px" : "-2px")};

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