import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { transparentize } from 'polished';
import {} from 'react-error-boundary';
import styled from '@darajs/styled-components';
import { injectCss, parseRawCss } from '../../shared/utils';
import { UserError } from '../../types/core';
import { useVariable } from '../interactivity';
const StyledErrorDisplay = styled.div `
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;

    height: min-content;
    padding: 1rem;

    background-color: ${(props) => transparentize(0.9, props.theme.colors.error)};
    border-radius: 0.25rem;
`;
const ErrorDisplayWrapper = injectCss(StyledErrorDisplay);
const IconWrapper = styled.div `
    display: flex;
    height: 100%;
`;
const ErrorIcon = styled.i `
    line-height: 21px;
    color: ${(props) => props.theme.colors.error};
`;
const ContentWrapper = styled.div `
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
`;
const ErrorContent = styled.div `
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: ${(props) => props.theme.colors.error};
`;
const ErrorTitle = styled.h3 `
    display: flex;
    gap: 0.375rem;

    font-size: 1rem;
    font-weight: bold;
    line-height: 1.375rem;
    color: ${(props) => props.theme.colors.error};
`;
const ErrorText = styled.span `
    font-size: 0.875rem;
    line-height: 1.25rem;
`;
const RetryButton = styled.button `
    cursor: pointer;

    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: ${(props) => props.theme.colors.error};

    background-color: inherit;
    border: none;
    border: 1px solid;
    border-color: ${(props) => props.theme.colors.error};
    border-radius: 5px;

    transition-timing-function: ease;
    transition-duration: 100ms;
    transition-property: color, border-color;

    i {
        line-height: 21px;
        transition: transform 400ms ease-in-out;
    }

    &:hover {
        color: ${(props) => props.theme.colors.errorHover};
        border-color: ${(props) => props.theme.colors.errorHover};

        i {
            transform: rotate(180deg);
        }
    }
`;
function ErrorDisplay(props) {
    var _a, _b, _c, _d, _e;
    const [cssValue] = useVariable((_a = props.config) === null || _a === void 0 ? void 0 : _a.raw_css);
    const [styles, css] = parseRawCss(cssValue);
    const defaultMessage = props.error instanceof UserError ? props.error.message : 'Try again or contact the application owner.';
    return (_jsxs(ErrorDisplayWrapper, { "$rawCss": css, style: styles, children: [_jsx(ContentWrapper, { children: _jsxs(ErrorContent, { children: [_jsxs(ErrorTitle, { children: [_jsx(IconWrapper, { children: _jsx(ErrorIcon, { "aria-hidden": true, className: "fa-solid fa-circle-xmark fa-lg" }) }), (_c = (_b = props === null || props === void 0 ? void 0 : props.config) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : 'Error'] }), _jsx(ErrorText, { children: (_e = (_d = props === null || props === void 0 ? void 0 : props.config) === null || _d === void 0 ? void 0 : _d.description) !== null && _e !== void 0 ? _e : defaultMessage })] }) }), props.resetErrorBoundary && (_jsx(RetryButton, { onClick: () => props.resetErrorBoundary(props.error), type: "button", children: _jsx("i", { "aria-hidden": true, className: "fa-solid fa-rotate fa-xl" }) }))] }));
}
export default ErrorDisplay;
//# sourceMappingURL=error-display.js.map