import type { FC } from 'react';
import React, { useEffect } from 'react';
import {
    Breadcrumb,
    Button,
    InfoMessage,
    PageHeader,
} from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { Illustration } from '@theorchard/suite-icons';
import { OrderDir } from 'src/data/globalTypes';
import { useGetSongChangesQuery } from 'src/data/queries/pubSongChanges/getSongChangesQuery';
import CreateChangelogReport from 'src/pages/pubSongChangesPage/components/createChangelogReport/createChangelogReport';
import SongChangesTable from './components/songChangesTable/songChangesTable';
import {
    type SortBy,
    type SortDirection,
} from './components/songChangesTable/types';
import type { ChangelogReportOrderByField } from 'src/data/globalTypes';

export const CLASSNAME = 'PubSongChangesPage';
const DEFAULT_ROW_LIMIT = 20;
const DEFAULT_SORT_DIRECTION = OrderDir.DESC;
const DEFAULT_SORT_FIELD: SortBy = {
    key: 'CREATED_AT',
    direction: DEFAULT_SORT_DIRECTION.toLowerCase() as SortDirection,
};
const pollingInterval = 2000;

const PubSongChangesPage: FC<object> = () => {
    const [open, setOpen] = React.useState(false);
    const [page, setPage] = React.useState(0);
    const [pageSize, setPageSize] = React.useState(DEFAULT_ROW_LIMIT);
    const [sortBy, setSortBy] = React.useState<SortBy>(DEFAULT_SORT_FIELD);

    const {
        data,
        loading,
        error,
        startPolling,
        stopPolling,
        fetchMore,
        fetchingMore,
        refetch,
    } = useGetSongChangesQuery({
        limit: pageSize,
        offset: page * pageSize,
        orderBy: sortBy.key as ChangelogReportOrderByField,
        orderDir: sortBy.direction.toUpperCase() as OrderDir,
    });

    useEffect(() => {
        const handleFetchMore = (limit: number, offset: number) => {
            void fetchMore({
                variables: {
                    limit,
                    offset,
                    orderBy: sortBy.key as ChangelogReportOrderByField,
                    orderDir: sortBy.direction.toUpperCase() as OrderDir,
                },
            });
        };
        if (!loading) handleFetchMore(pageSize, page * pageSize);
    }, [fetchMore, sortBy, loading, page, pageSize]);

    const handleSort = (sortBy: SortBy[]) => {
        if (sortBy[0].key === 'date') {
            setSortBy({ key: 'CREATED_AT', direction: sortBy[0].direction });
        }
    };

    const handleOpen = () => () => {
        stopPolling();
        setOpen(true);
    };

    const handleClose = () => {
        startPolling(pollingInterval);
        setOpen(false);
    };

    useEffect(() => {
        const inProgressReports =
            data?.items?.filter(report => report.status === 'IN_PROGRESS') ??
            [];
        if (inProgressReports.length === 0) {
            stopPolling();
        }
    }, [data, stopPolling]);

    if (error)
        return (
            <InfoMessage
                Icon={<Illustration name="dataError" />}
                message={$t('tools.pubSongChangesPage.errorLoadingData')}
            />
        );

    return (
        <Page className={CLASSNAME}>
            <PageHeader>
                <PageHeader.Breadcrumb>
                    <Breadcrumb>
                        <Breadcrumb.Item href="/tools">
                            {$t('tools.pubSongChangesPage.breadcrumb.tools')}
                        </Breadcrumb.Item>
                        <Breadcrumb.Item active>
                            {$t('tools.pubSongChangesPage.pubSongChangesTitle')}
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </PageHeader.Breadcrumb>
                <PageHeader.Row>
                    <PageHeader.Primary>
                        <h2>
                            {$t('tools.pubSongChangesPage.pubSongChangesTitle')}
                        </h2>
                    </PageHeader.Primary>
                    <Button variant="primary" onClick={handleOpen()}>
                        Generate Report
                    </Button>
                </PageHeader.Row>
            </PageHeader>
            <CreateChangelogReport open={open} closeModal={handleClose} />
            <div>
                <SongChangesTable
                    reports={data?.items || []}
                    pageSize={pageSize}
                    page={page}
                    totalCount={data?.totalCount || 0}
                    loading={loading || fetchingMore}
                    setPage={setPage}
                    setPageSize={setPageSize}
                    sortBy={[sortBy]}
                    onSort={handleSort}
                    refetch={refetch}
                />
            </div>
        </Page>
    );
};

export default PubSongChangesPage;