import React from 'react';

import { Message, Icon } from 'semantic-ui-react'

import { BigApiError } from '../../api/api.js';
import ShippoErrorDetails from './ShippoErrorDetails.jsx';

export default class BigApiErrorMessage extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        if (this.props.error) {
            if (typeof this.props.error === "string") {
                return (
                    <div>
                        <Message icon negative>
                            <Icon name="warning circle" />
                            <Message.Header>{this.props.error}</Message.Header>
                        </Message>
                    </div>
                );
            }
            const error = BigApiError.getApiError(this.props.error);
            console.log('[BigApiErrorMessage] error object:', error);
            console.log('[BigApiErrorMessage] error.details:', error.details);

            // Check for Shippo-specific error details
            const shippoMessages = error.details?.shippoMessages;
            console.log('[BigApiErrorMessage] shippoMessages:', shippoMessages);
            if (shippoMessages && shippoMessages.length > 0) {
                return (
                    <div>
                        <Message icon negative>
                            <Icon name="warning circle" />
                            <Message.Header>{error.message}</Message.Header>
                        </Message>
                        <ShippoErrorDetails shippoMessages={shippoMessages} />
                    </div>
                );
            }

            if (error.errors && error.errors.length > 0) {
                return (
                    <div>
                        <Message icon negative>
                            <Icon name="warning circle" />
                            <Message.Header>{error.message}</Message.Header>
                            <Message.Content>
                                {error.errors.map((error, index) => {
                                    return <p key={index}>{error.msg}</p>
                                })}
                            </Message.Content>
                        </Message>
                    </div>
                );
            } else if (error.message) {
                console.log(JSON.stringify(error.message));
                return (
                    <div>
                        <Message icon negative>
                            <Icon name="warning circle" />
                            <Message.Header>{error.message}</Message.Header>
                        </Message>
                    </div>
                );
            } else if (error.statusText) {
                return (
                    <div>
                        <Message icon negative>
                            <Icon name="warning circle" />
                            <Message.Header>{error.statusText}</Message.Header>
                        </Message>
                    </div>
                );
            }
        }
        return null;
    }
}