import type { FC } from 'react';
import React from 'react';
import { SkeletonLoader, Section } from '@theorchard/suite-components';
import { groupBy } from 'lodash';
import { getItemColClassName } from 'src/pages/productModal/utils/getItemColClassName';
import {
    isRevisionWithTrackOSRWarning,
    getValidationCodesToIgnore,
    mergePotentialAudioInfringements,
} from 'src/utils/product';
import BlocklistValidationGroup from './blocklistValidationGroup';
import ProductValidationGroup from './productValidationGroup';
import PricingValidationGroup from './pricingValidationGroup';
import type { MergedProduct } from 'src/product/product';
import type { Validation } from 'src/types';

export const CLASS_NAME = 'ProductValidationBlock';
export const INTL_PREFIX = 'contentReview.productValidationBlock';

export interface Props {
    validations?: Validation[];
    product: MergedProduct;
}

const ProductValidationBlock: FC<Props> = ({ validations, product }) => {
    const validationCodes =
        validations?.map(validation => validation.code) || [];
    const groupedValidations = groupBy(validations, ({ code }) => code);
    const mergedGroupedValidations =
        mergePotentialAudioInfringements(groupedValidations);
    const validationsKeys = Object.keys(mergedGroupedValidations).filter(key =>
        Boolean(
            !(
                getValidationCodesToIgnore(validationCodes).includes(key) ||
                isRevisionWithTrackOSRWarning(null, product.isRevision, key)
            )
        )
    );
    const isEmpty = validations && !validationsKeys.length;

    const renderValidationGroup = (validationCode: string) => {
        let ValidationGroup;
        if (validationCode === 'BLOCKLIST') {
            ValidationGroup = BlocklistValidationGroup;
        } else if (
            [
                'ALBUM_PREORDER_PRICE_SUM_OF_TRACKS',
                'ALBUM_PREORDER_PRICE_SUM_OF_IGS',
            ].includes(validationCode)
        ) {
            ValidationGroup = PricingValidationGroup;
        } else {
            ValidationGroup = ProductValidationGroup;
        }

        return (
            <div
                key={validationCode}
                className={`${getItemColClassName(
                    validationsKeys.length
                )} ProductValidationItemWrapper`}
            >
                <ValidationGroup
                    validationGroup={mergedGroupedValidations[validationCode]}
                    product={product}
                />
            </div>
        );
    };

    return (
        <Section
            className={CLASS_NAME}
            testId={CLASS_NAME}
            expandable={!isEmpty}
        >
            {!validations ? (
                <SkeletonLoader
                    testId={`${CLASS_NAME}-Skeleton`}
                    className={`${CLASS_NAME}-Skeleton`}
                    vertical
                    numberOfItems={3}
                />
            ) : (
                <>
                    <Section.Header
                        testId={`${CLASS_NAME}.noticeCount`}
                        title={$t(`${INTL_PREFIX}.noticeCount`, {
                            count: validationsKeys.length,
                        })}
                    />
                    {!isEmpty && (
                        <Section.Body data-testid="accordionContent">
                            {validationsKeys.length ? (
                                <div className={`${CLASS_NAME}-list px-1 row`}>
                                    {validationsKeys.map(renderValidationGroup)}
                                </div>
                            ) : null}
                        </Section.Body>
                    )}
                </>
            )}
        </Section>
    );
};

export default ProductValidationBlock;