import type { FC } from 'react';
import React from 'react';
import { Alert, Pill } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { formatValidationMessage } from 'src/pages/productModal/utils/productValidation';
import type { Validation } from 'src/types';

interface Props {
    validations: Validation[];
}

const CLASS_NAME = 'ProductFieldValidation';

const formatReason = (validation: Validation) => {
    const reason = formatValidationMessage(validation);
    return (
        <Alert
            key={`${validation.target}-${validation.targetId}`}
            variant={validation.severity}
            text={
                <div>
                    <strong>
                        {formatMessage(
                            `common.productValidations.codes.${validation.code}_TITLE`
                        )}
                    </strong>
                    <br />
                    {reason}
                </div>
            }
        />
    );
};

const ProductFieldValidation: FC<Props> = ({ validations }) => {
    if (!validations.length) return null;

    const foundError = validations.find(val => val.severity === 'error');
    const levelClass = foundError ? 'error' : 'warning';

    return (
        <div className={CLASS_NAME}>
            {validations.map(val => (
                <span key={val.code} id={`product-${val.code}-scrollTarget`} />
            ))}

            <Pill
                testId={`${validations[0].target}-${validations[0].code}-pill`}
                iconName={levelClass}
                indicator={levelClass}
                variant={levelClass}
                className={`${CLASS_NAME}-Pill`}
                popoverOptions={{
                    id: 'errorPopover',
                    content: (
                        <div className={`${CLASS_NAME}-Popover`}>
                            {validations.map(validation =>
                                formatReason(validation)
                            )}
                        </div>
                    ),
                }}
            />
        </div>
    );
};

export default ProductFieldValidation;