import React from 'react';
import { formatMessage } from '../../utils';

export const TERM_GROUP = 'errors';
export const DEFAULT_TERM = 'default';
export const UNKNOWN_CODE = 'CLIENT';
export const UNKNOWN_TEXT = 'ERROR';

type ErrorValue =
    | string
    | {
          message?: string;
          error?: { message?: string };
          statusCode?: string | number;
          statusText?: string;
      };

export const extractMessage = (error: ErrorValue): string => {
    if (typeof error === 'string') return error;

    const {
        message: msg,
        error: inner = {},
        statusCode = UNKNOWN_CODE,
        statusText = UNKNOWN_TEXT,
    } = error;

    const { message = msg || `${statusCode} ${statusText}` } = inner;

    return message ?? '';
};

interface ErrorComponentProps {
    term?: string;
    error?: ErrorValue;
}

const ErrorComponent: React.FC<ErrorComponentProps> = ({
    error = '',
    term = DEFAULT_TERM,
}) => (
    <div className="ErrorMessage">
        <div className="error-text">
            {formatMessage(`${TERM_GROUP}.${term}`)}
        </div>
        {error && <div className="error-details">{extractMessage(error)}</div>}
    </div>
);

export default ErrorComponent;