import type { FC } from 'react';
import React from 'react';
import { Alert } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import type { FlattenedApolloError } from '@theorchard/suite-frontend';

interface MutationProps {
    srMutationError?: FlattenedApolloError;
    contribMutationError?: FlattenedApolloError;
}

interface ValidationProps {
    errors: string[];
}

const MUTATION_CLASSNAME = 'MutationErrors';
const VALIDATION_CLASSNAME = 'ValidationErrors';

export const MutationErrors: FC<MutationProps> = ({
    srMutationError,
    contribMutationError,
}) => (
    <div className={MUTATION_CLASSNAME}>
        <Alert
            variant="error"
            text={
                <span>
                    {$t(`neighbouringRights.songPage.validationErrorHeading`)}
                    <ul key="srMutationError">
                        {srMutationError && <li>{srMutationError.message}</li>}
                    </ul>
                    <ul key="contribMutationError">
                        {contribMutationError && (
                            <li>{contribMutationError.message}</li>
                        )}
                    </ul>
                </span>
            }
        />
    </div>
);

export const ValidationErrors: FC<ValidationProps> = ({ errors }) => (
    <div className={VALIDATION_CLASSNAME}>
        <Alert
            variant="error"
            text={
                <span>
                    {$t(`neighbouringRights.songPage.saveErrorHeading`)}
                    <ul>
                        {errors.map(e => (
                            <li key={e}>
                                {formatMessage(
                                    `neighbouringRights.songPage.${`${e}`.toLowerCase()}`
                                )}
                            </li>
                        ))}
                    </ul>
                </span>
            }
        />
    </div>
);