import type { FC } from 'react';
import React from 'react';
import { Alert, HelpTooltip } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import cx from 'classnames';
import { useCurrentValidationContext } from 'src/components/currentValidationProvider/currentValidationProvider';
import { TrackValidationWarningCode } from 'src/constants';
import type { MergedProduct } from 'src/product/product';
import type { Validation } from 'src/types';

export const CLASS_NAME = 'ProductValidationGroup';
export const CLASS_NAME_LEGACY = 'ProductValidationGroupLegacy';
const INTL_PREFIX = 'contentReview.productValidationGroup';

export interface Props {
    validationGroup: Validation[];
    product: MergedProduct;
    showGroupCount?: boolean;
}

const ProductValidationGroup: FC<Props> = ({
    validationGroup,
    product,
    showGroupCount = true,
}) => {
    const { dispatch: dispatchCurrentValidation } =
        useCurrentValidationContext();

    const distinctValidationGroup = React.useMemo(() => {
        const seen = new Set<string | number>();
        return validationGroup
            .filter(v => {
                if (v.targetId == null) return true;
                if (seen.has(v.targetId)) return false;
                seen.add(v.targetId);
                return true;
            })
            .sort((a, b) => a.targetId - b.targetId);
    }, [validationGroup]);

    const initialValidation = distinctValidationGroup?.[0];

    const onValidationGroupClick = () => {
        let dispatchValue: string;
        if (initialValidation.type === 'product') {
            dispatchValue = `product-${initialValidation.code}`;
        } else if (
            initialValidation.code ===
            TrackValidationWarningCode.SPOTIFY_WATCHLIST_ARTIST
        ) {
            dispatchValue = `contributor-${initialValidation.targetId}`;
        } else {
            dispatchValue = `track-${initialValidation.targetId}`;
        }

        dispatchCurrentValidation({
            currentValidation: dispatchValue,
            triggerScroll: true,
            showPopover: true,
        });
    };

    const formatToolTip = () => (
        <div>
            {$t(`${INTL_PREFIX}.associatedTracks`)}
            {distinctValidationGroup.map(element => (
                <p key={`ValidationGroup${element.code}${element.targetId}`}>
                    {$t(`${INTL_PREFIX}.trackNumberAndTitle`, {
                        trackNumber:
                            product.tracks[
                                element.targetId
                            ]?.trackNumber.get() || '',
                        trackTitle:
                            product.tracks[element.targetId]?.trackName.get() ||
                            '',
                    })}
                </p>
            ))}
        </div>
    );

    const formatGroupCount = () => {
        if (initialValidation.type === 'product')
            return (
                <span
                    data-testid="validationGroupCount"
                    className={cx(
                        'validationGroupCount',
                        `validationCount-${initialValidation.severity}`
                    )}
                >
                    {validationGroup.length}
                </span>
            );

        return (
            <HelpTooltip
                id={`HelpToolTip-${initialValidation.code}`}
                overlayClassName={cx(`${CLASS_NAME}ToolTip`, 'contentReview')}
                message={formatToolTip()}
                tooltipPlacement="bottom"
            >
                <span
                    data-testid="validationGroupCount"
                    className={cx(
                        'validationGroupCount',
                        `validationCount-${initialValidation.severity}`
                    )}
                >
                    {distinctValidationGroup.length}
                </span>
            </HelpTooltip>
        );
    };

    const shouldHaveClickToScroll = () =>
        initialValidation.code !== 'BLOCKLIST';

    if (!initialValidation) return null;

    return (
        <div
            role="button"
            onClick={onValidationGroupClick}
            onKeyPress={onValidationGroupClick}
            tabIndex={0}
            data-testid={`validationGroup${initialValidation.code}`}
            style={{
                pointerEvents: shouldHaveClickToScroll() ? 'inherit' : 'none',
            }}
        >
            <Alert
                testId={CLASS_NAME}
                className={CLASS_NAME}
                variant={initialValidation.severity}
                text={
                    <div className="d-flex justify-content-between">
                        <div
                            data-testid="validationGroupTitle"
                            className="validationGroupTitle textOverflowEllipsis"
                        >
                            {formatMessage(
                                `common.productValidations.codes.${initialValidation.code}_TITLE`
                            )}
                        </div>
                        {showGroupCount && formatGroupCount()}
                    </div>
                }
            />
        </div>
    );
};

export default ProductValidationGroup;