import type { FC } from 'react';
import React from 'react';
import { NetworkStatus } from '@apollo/client';
import { GridTable, InfoMessage, Section } from '@theorchard/suite-components';
import { createHref } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import InfiniteScroll from 'src/components/infiniteScroll';
import {
    DateCell,
    UtcDateCell,
    TruncatedTextCell,
    ThumbnailProductCell,
    AccountSubaccountCell,
} from 'src/components/table';
import NoticesCell from 'src/components/table/noticesCell';
import { EMPTY_CHAR, ROUTE_REVIEW_QUEUE_PRODUCT_MODAL } from 'src/constants';
import {
    useSubmissionDate,
    useSubmissionDateSupportFF,
    useReviewQueueExportFF,
} from 'src/utils/features';
import { trackContentReviewEvent } from 'src/utils/product';
import { updateQueryParams, getQueryParams } from 'src/utils/routev2';
import type { SortBy, SortDirection } from 'src/components/table/types';
import type {
    ReviewQueueSearchItem,
    ReviewQueueSearchResults,
} from 'src/data/queries/reviewQueueSearch/types';
import type { InfiniteScrollVariables } from 'src/types';
import type { LocationType, HistoryType } from 'src/utils/route';
import { exportReviewQueueCsv } from './reviewQueueListTable.export';
import { useLazyReviewQueueMultiSelectSearch } from 'src/data/queries/reviewQueueMultiSelectSearch/reviewQueueMultiSelectSearch';
import { getReviewQueueQueryParams } from 'src/utils/routev2';

export const CLASS_NAME = 'ReviewQueueListTable';
export const SECTION_TEST_ID = `${CLASS_NAME}-section`;
export const INTL_PREFIX = 'contentReview.reviewQueueListTable';

const SORT_DIR: Record<string, SortDirection> = {
    ASC: 'asc',
    DESC: 'desc',
};

const ReviewQueueListTable: FC<{
    location: LocationType;
    history: HistoryType;
    fetchMore: (variables: InfiniteScrollVariables) => void;
    networkStatus: number;
    reviewQueueSearch: ReviewQueueSearchResults | null;
}> = ({ location, history, fetchMore, networkStatus, reviewQueueSearch }) => {
    const submissionDateEnabled = useSubmissionDate();
    const submissionDateSupportEnabled = useSubmissionDateSupportFF();
    const reviewQueueExportEnabled = useReviewQueueExportFF();
    const queryParams = getQueryParams(location.search);
    const sortKey = queryParams.orderBy;
    const sortDirection = SORT_DIR[queryParams.orderDir];
    const isDefaultQueue = Boolean(
        queryParams.queueName === '' || queryParams.queueName === 'initial'
    );
    const isEscalationQueue = Boolean(queryParams.queueName === 'escalation');

    const { fetch: fetchExportData } = useLazyReviewQueueMultiSelectSearch();

    const onSort = (field: string, dir: string) => {
        trackContentReviewEvent('Sort', `${field} - ${dir}`);
        updateQueryParams(location, history, {
            orderBy: field,
            orderDir: dir.toUpperCase(),
        });
    };

    const handleFetchMore = (limit: number, offset: number) => {
        trackContentReviewEvent('Scroll', 'Load More');
        fetchMore({
            variables: {
                limit,
                offset,
            },
        });
    };

    const isLoading =
        networkStatus === NetworkStatus.loading ||
        networkStatus === NetworkStatus.setVariables ||
        networkStatus === NetworkStatus.refetch;

    const onClickReview = (reviewQueueId: number) => {
        const params = getQueryParams(location.search);

        trackContentReviewEvent('Click', 'Start Review');
        history.push(
            createHref(ROUTE_REVIEW_QUEUE_PRODUCT_MODAL, {
                reviewQueueId,
                ...params,
            })
        );
    };

    const handleExportCsv = async () => {
        if (!reviewQueueSearch?.items?.length) return;

        const reviewQueuequeryParams = getReviewQueueQueryParams(
            location.search
        );
        const reviewQueueQueryVariables = {
            ...reviewQueuequeryParams,
            offset: 0,
            limit: reviewQueueSearch?.totalCount || 0,
        };
        let itemsToExport = reviewQueueSearch.items;
        if (
            (reviewQueuequeryParams.facets?.length ?? 0) <= 1 &&
            reviewQueuequeryParams.facets?.[0]?.name === 'queue_name.keyword' &&
            reviewQueueSearch?.items?.length !== reviewQueueSearch?.totalCount
        ) {
            const response = await fetchExportData({
                variables: reviewQueueQueryVariables,
            });
            itemsToExport =
                response.data?.reviewQueueMultiSelectSearch?.items || [];
        }
        exportReviewQueueCsv(itemsToExport, queryParams.queueName);
    };

    return (
        <InfiniteScroll
            fetchMore={handleFetchMore}
            loading={networkStatus === NetworkStatus.fetchMore}
            count={reviewQueueSearch?.items.length ?? 0}
            totalResults={reviewQueueSearch?.totalCount}
            totalLimit={10000}
            loadLimit={50}
        >
            <Section testId={SECTION_TEST_ID}>
                <Section.Body>
                    <Section.Table>
                        <GridTable
                            className={CLASS_NAME}
                            data={reviewQueueSearch?.items}
                            paginationText={$t(`${INTL_PREFIX}.toReview`, {
                                count:
                                    reviewQueueSearch?.totalCount || EMPTY_CHAR,
                            })}
                            loading={isLoading}
                            onSort={([{ key, direction }]: SortBy[]) =>
                                key && onSort(key, direction)
                            }
                            sortBy={{ key: sortKey, direction: sortDirection }}
                            variant="zebra"
                            bordered
                            emptyStateIcon={
                                <InfoMessage
                                    message={$t('contentReview.table.noData')}
                                    body={$t(
                                        'contentReview.table.emptyBodyTerm'
                                    )}
                                    illustration="noResults"
                                />
                            }
                            emptyStateTitle=""
                            rowKey={(row: ReviewQueueSearchItem) =>
                                row.reviewQueueId
                            }
                            rowActions={{
                                review: {
                                    icon: () => (
                                        <GlyphIcon name="review" size={16} />
                                    ),
                                    tooltip: 'Review',
                                    onClick: row => {
                                        onClickReview(row.reviewQueueId);
                                    },
                                },
                            }}
                            exportable={Boolean(
                                reviewQueueExportEnabled &&
                                    reviewQueueSearch?.items.length
                            )}
                            onExport={handleExportCsv}
                        >
                            <GridTable.Column
                                name="productName"
                                title={$t(`${INTL_PREFIX}.headers.productName`)}
                                Cell={ThumbnailProductCell}
                                minWidth="20rem"
                                maxWidth="4fr"
                                fixed
                            />
                            <GridTable.Column
                                name="movedToQueueByUserName"
                                title={$t(
                                    `${INTL_PREFIX}.headers.movedToQueueByUserName`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="min-content"
                                visibility={
                                    isDefaultQueue ? 'hidden' : 'visible'
                                }
                                sortable
                            />
                            <GridTable.Column
                                name="movedToTargetName"
                                title={$t(
                                    `${INTL_PREFIX}.headers.movedToTargetName`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="15rem"
                                maxWidth="4fr"
                                visibility={
                                    isEscalationQueue ? 'visible' : 'hidden'
                                }
                            />
                            <GridTable.Column
                                name="escalationType"
                                title={$t(
                                    `${INTL_PREFIX}.headers.escalationType`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="15rem"
                                maxWidth="4fr"
                                visibility={
                                    isEscalationQueue ? 'visible' : 'hidden'
                                }
                            />
                            <GridTable.Column
                                name="notices"
                                title={$t(`${INTL_PREFIX}.headers.notices`)}
                                Cell={NoticesCell}
                                minWidth="10rem"
                                maxWidth="4fr"
                                align="center"
                            />
                            <GridTable.Column
                                name="saleStartDate"
                                title={$t(
                                    `${INTL_PREFIX}.headers.saleStartDate`
                                )}
                                Cell={DateCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                                sortable
                            />
                            <GridTable.Column
                                name="preorderDate"
                                title={$t(
                                    `${INTL_PREFIX}.headers.preorderDate`
                                )}
                                Cell={DateCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                                sortable
                            />
                            {submissionDateEnabled ? (
                                <GridTable.Column
                                    name="submissionDatetime"
                                    title={$t(
                                        `${INTL_PREFIX}.headers.submissionDatetime`
                                    )}
                                    Cell={
                                        submissionDateSupportEnabled
                                            ? UtcDateCell
                                            : DateCell
                                    }
                                    minWidth="10rem"
                                    maxWidth="3fr"
                                    sortable
                                />
                            ) : (
                                <GridTable.Column
                                    name="addedAt"
                                    title={$t(`${INTL_PREFIX}.headers.addedAt`)}
                                    Cell={
                                        submissionDateSupportEnabled
                                            ? UtcDateCell
                                            : DateCell
                                    }
                                    minWidth="10rem"
                                    maxWidth="3fr"
                                    sortable
                                />
                            )}
                            <GridTable.Column
                                name="submissionType"
                                title={$t(
                                    `${INTL_PREFIX}.headers.submissionType`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                            />
                            <GridTable.Column
                                name="submissionCount"
                                title={$t(
                                    `${INTL_PREFIX}.headers.submissionCount`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                                sortable
                            />
                            <GridTable.Column
                                name="productId"
                                title={$t(`${INTL_PREFIX}.headers.productId`)}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                            />
                            <GridTable.Column
                                name="upc"
                                title={$t(`${INTL_PREFIX}.headers.upc`)}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                            />
                            <GridTable.Column
                                name="labelName"
                                title={`${$t(
                                    `${INTL_PREFIX}.headers.account`
                                )}/ ${$t(`${INTL_PREFIX}.headers.subaccount`)}`}
                                Cell={AccountSubaccountCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                                sortable
                            />
                            <GridTable.Column
                                name="serviceTierName"
                                title={$t(
                                    `${INTL_PREFIX}.headers.serviceTierName`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                            />
                            <GridTable.Column
                                name="imprint"
                                title={$t(`${INTL_PREFIX}.headers.imprint`)}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                                sortable
                            />
                            <GridTable.Column
                                name="primaryArtist"
                                title={$t(
                                    `${INTL_PREFIX}.headers.primaryArtist`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                                sortable
                            />
                            <GridTable.Column
                                name="featuringArtist"
                                title={$t(
                                    `${INTL_PREFIX}.headers.featuringArtist`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                            />
                            <GridTable.Column
                                name="assignedReviewerName"
                                title={$t(
                                    `${INTL_PREFIX}.headers.assignedReviewerName`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                            />
                            <GridTable.Column
                                name="assignedToName"
                                title={$t(
                                    `${INTL_PREFIX}.headers.relationshipManager`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                            />
                            <GridTable.Column
                                name="secondaryInternalContactName"
                                title={$t(
                                    `${INTL_PREFIX}.headers.secondaryRelationshipManager`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                                sortable
                            />
                            <GridTable.Column
                                name="metadataLanguageName"
                                title={$t(
                                    `${INTL_PREFIX}.headers.metadataLanguageName`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                            />
                            <GridTable.Column
                                name="specialInstructions"
                                title={$t(
                                    `${INTL_PREFIX}.headers.specialInstructions`
                                )}
                                Cell={TruncatedTextCell}
                                minWidth="10rem"
                                maxWidth="3fr"
                                sortable
                            />
                        </GridTable>
                    </Section.Table>
                </Section.Body>
            </Section>
        </InfiniteScroll>
    );
};

export default ReviewQueueListTable;