import type { FC } from 'react';
import { useEffect } from 'react';
import React from 'react';
import { Section, GridTable } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { Illustration } from '@theorchard/suite-icons';
import { useGetAllFingerprintRules } from 'src/data/queries/getAllFingerprintRules';
import SectionTitle from '../sectionTitle';
import type { Product } from 'src/data/queries/product/types';

const PAGE_SIZE = 25;

export interface Props {
    className?: string;
    testId?: string;
    product: Product;
    rulesUpdatedNum?: number;
}

const ProductViewFingerprintingRestrictions: FC<Props> = ({
    className,
    testId,
    product,
    rulesUpdatedNum = 0,
}) => {
    const [page, setPage] = React.useState(0);
    const [pageSize, setPageSize] = React.useState(PAGE_SIZE);
    const { loading, data, refetch } = useGetAllFingerprintRules({
        productId: product.productId.toString(),
        limit: pageSize,
        offset: page * pageSize,
        isrc: null,
        name: null,
    });

    const numberOfVendorRules = data?.vendorRules.length || 0;
    const numberOfSubaccountRules = data?.subaccountRules.length || 0;

    useEffect(() => {
        if (rulesUpdatedNum > 0) {
            refetch().catch(e => {
                console.error('Error refetching fingerprint rules:', e);
            });
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [rulesUpdatedNum]);

    return (
        <div className={className} data-testid={testId}>
            <SectionTitle
                title={''}
                productId={0}
                section={''}
                isRevision={false}
            />
            <Section>
                <Page>
                    <div className="header">
                        <h3>
                            {$t(
                                'contentReview.productModal.fingerprintRulesTitle'
                            )}
                        </h3>
                    </div>
                    <Page.Body>
                        <GridTable
                            className="fingerprinting-restrictions-table"
                            testId="fingerprinting-restrictions-table"
                            variant="zebra"
                            bordered
                            paginated
                            page={page}
                            loading={loading}
                            loadingRows={3}
                            pageSize={pageSize}
                            totalCount={data?.numberOfTracks || 0}
                            data={data?.tracks || []}
                            onPageChange={setPage}
                            onPageSizeChange={setPageSize}
                            showUpdateIndicator
                            emptyStateIcon={() => (
                                <Illustration name="emptyState" />
                            )}
                            emptyStateTitle={$t(
                                'contentReview.productModal.noFingerprintRules'
                            )}
                            columnDefs={[
                                {
                                    name: 'trackNumber',
                                    title: '#',
                                    maxWidth: '3%',
                                },
                                {
                                    name: 'trackName',
                                    title: $t(
                                        'contentReview.productModal.fingerprintRulesTable.trackColumnTitle'
                                    ),
                                    maxWidth: '37%',
                                },
                                {
                                    name: 'isrc',
                                    title: 'ISRC',
                                    maxWidth: '15%',
                                    align: 'right',
                                },
                                {
                                    name: 'account_rules',
                                    title: $t(
                                        'contentReview.productModal.fingerprintRulesTable.nAccountRulesColumnTitle'
                                    ),
                                    maxWidth: '15%',
                                    align: 'right',
                                    template: 'number',
                                    Cell: () => {
                                        return (
                                            <span>{numberOfVendorRules}</span>
                                        );
                                    },
                                },
                                {
                                    name: 'subaccount_rules',
                                    title: $t(
                                        'contentReview.productModal.fingerprintRulesTable.nSubaccountRulesColumnTitle'
                                    ),
                                    maxWidth: '15%',
                                    align: 'right',
                                    template: 'number',
                                    Cell: () => {
                                        return (
                                            <span>
                                                {numberOfSubaccountRules}
                                            </span>
                                        );
                                    },
                                },
                                {
                                    name: 'track_rules',
                                    title: $t(
                                        'contentReview.productModal.fingerprintRulesTable.nTracksRulesColumnTitle'
                                    ),
                                    maxWidth: '15%',
                                    align: 'right',
                                    template: 'number',
                                    Cell: ({ data }) => {
                                        return <span>{data.rules.length}</span>;
                                    },
                                },
                            ]}
                        />
                    </Page.Body>
                </Page>
            </Section>
            <div style={{ height: 32 }} />
        </div>
    );
};

export default ProductViewFingerprintingRestrictions;