import type { FC } from 'react';
import React from 'react';
import { SkeletonLoader, Section } from '@theorchard/suite-components';
import { getItemColClassName } from 'src/pages/productModal/utils/getItemColClassName';
import { useReviewQueueItemQuery } from 'src/types';
import ProductNoteSection from '../productValidationBlock/productNoteSection';
import ReviewContextAlert from './reviewContextAlert/reviewContextAlert';
import type { MergedProduct } from 'src/product/product';

export const CLASS_NAME = 'ProductNoteBlock';
export const INTL_PREFIX = 'contentReview.productNoteBlock';

export interface Props {
    reviewQueueId: number;
    product: MergedProduct;
}

const ProductNoteBlockV2: FC<Props> = ({ reviewQueueId, product }) => {
    const { loading: loadingItem, data: reviewQueueItem } =
        useReviewQueueItemQuery(reviewQueueId);

    const displayItems = [];
    const bulkSession = product.bulkSession;
    if (
        bulkSession &&
        bulkSession.submittedProductsCount &&
        bulkSession.submittedProductsCount > 1
    )
        displayItems.push(
            <ReviewContextAlert
                contextType="bulkSession"
                note={$t(`${INTL_PREFIX}.bulkSessionNote`, {
                    submittedProductsCount: bulkSession.submittedProductsCount,
                    id: bulkSession.id,
                })}
            />
        );
    const accountNote = product.label.accountReviewContext.get();
    if (accountNote)
        displayItems.push(
            <ReviewContextAlert
                contextType="account"
                note={String(accountNote)}
            />
        );
    const subaccountNote = product.label.subaccountReviewContext.get();
    if (subaccountNote)
        displayItems.push(
            <ReviewContextAlert
                contextType="subaccount"
                note={String(subaccountNote)}
            />
        );
    if (reviewQueueItem?.moveNote && reviewQueueItem?.movedAtDatetime)
        displayItems.push(
            <ProductNoteSection reviewQueueItem={reviewQueueItem} />
        );

    if (!loadingItem && !displayItems.length) return null;

    const itemColName = getItemColClassName(displayItems.length);
    return (
        <Section className={CLASS_NAME} testId={CLASS_NAME} expandable>
            {loadingItem ? (
                <SkeletonLoader
                    testId={`${CLASS_NAME}-Skeleton`}
                    className={`${CLASS_NAME}-Skeleton`}
                    vertical
                    numberOfItems={3}
                />
            ) : displayItems.length ? (
                <>
                    <Section.Header
                        title={$t(`${INTL_PREFIX}.noteCount`, {
                            count: displayItems.length,
                        })}
                    />
                    <Section.Body>
                        <div className="row">
                            {displayItems.map((item, index) => (
                                <div
                                    key={index}
                                    className={`${itemColName} ProductNoteBlock-item`}
                                >
                                    {item}
                                </div>
                            ))}
                        </div>
                    </Section.Body>
                </>
            ) : null}
        </Section>
    );
};

export default ProductNoteBlockV2;