import type { FC } from 'react';
import React from 'react';
import { Alert, Button, Pill } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import cx from 'classnames';
import { EMPTY_CHAR } from 'src/constants';
import { formatValidationMessage } from 'src/pages/productModal/utils/productValidation';
import { useMissingComposerUpdateFF } from 'src/utils/features';
import { useCurrentValidationContext } from '../currentValidationProvider/currentValidationProvider';
import type { Validation } from 'src/types';

export interface Props {
    validations: Validation[];
    tuid: number;
    nextTuid?: number;
    previousTuid?: number;
    isMissingComposerMsgUpdate?: boolean;
    idPrefix?: string;
}

const CLASS_NAME = 'TrackFieldValidation';
const INTL_PREFIX = 'contentReview.trackFieldValidation';

const formatReason = (
    validation: Validation,
    isMissingComposerMsgUpdate?: boolean
) => {
    const reason = formatValidationMessage(
        validation,
        isMissingComposerMsgUpdate
    );
    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 TrackFieldValidation: FC<Props> = ({
    validations,
    tuid,
    nextTuid,
    previousTuid,
    idPrefix = 'track',
}) => {
    const { dispatch } = useCurrentValidationContext();
    const isMissingComposerMsgUpdate = useMissingComposerUpdateFF();

    if (!validations.length) return <span>{EMPTY_CHAR}</span>;

    const foundError = validations.find(val => val.severity === 'error');
    const popoverFooter =
        nextTuid || previousTuid ? (
            <div className="noticePagingControls">
                {previousTuid && (
                    <Button
                        size="sm"
                        className="trackValidationPrevious"
                        onClick={e => {
                            e.stopPropagation();
                            dispatch({
                                currentValidation: `${idPrefix}-${previousTuid}`,
                                triggerScroll: true,
                                showPopover: true,
                            });
                        }}
                    >
                        {$t(`${INTL_PREFIX}.previousTrack`)}
                    </Button>
                )}
                {nextTuid && (
                    <Button
                        size="sm"
                        variant="primary"
                        className="trackValidationNext"
                        onClick={e => {
                            e.stopPropagation();
                            dispatch({
                                currentValidation: `${idPrefix}-${nextTuid}`,
                                triggerScroll: true,
                                showPopover: true,
                            });
                        }}
                    >
                        {$t(`${INTL_PREFIX}.nextTrack`)}
                    </Button>
                )}
            </div>
        ) : null;

    const levelClass = foundError ? 'error' : 'warning';

    return (
        <div className={cx(CLASS_NAME, levelClass)}>
            <span id={`${idPrefix}-${tuid}-scrollTarget`} />
            <span
                data-testid={`${idPrefix}-${tuid}-pill-wrapper`}
                onClick={event => {
                    if (!event.isTrusted) return; // handle ONLY user events

                    dispatch({
                        currentValidation: `${idPrefix}-${tuid}`,
                        triggerScroll: true,
                        showPopover: false,
                    });
                }}
            >
                <Pill
                    testId={`${idPrefix}-${tuid}-pill`}
                    className={`${CLASS_NAME}Pill`}
                    iconName={levelClass}
                    indicator={levelClass}
                    variant={levelClass}
                    text={String(validations.length)}
                    popoverOptions={{
                        id: `${idPrefix}-${tuid}-pill`,
                        content: (
                            <div className={`${CLASS_NAME}AlertsContainer`}>
                                {validations.map(validation =>
                                    formatReason(
                                        validation,
                                        isMissingComposerMsgUpdate
                                    )
                                )}
                                {popoverFooter}
                            </div>
                        ),
                    }}
                />
            </span>
        </div>
    );
};

export default TrackFieldValidation;