import React, { useEffect, useState } from 'react';
import { Alert, Button, GridTable } from '@theorchard/suite-components';
import { useFeatureFlag } from '@theorchard/suite-frontend';
import { isEmpty } from 'lodash-es';
import { useAccountingPeriodList } from 'src/apollo/queries/accounting-period';
import { useStatementPeriodCurrentPeriod } from 'src/apollo/queries/statement-periods';
import { AccountingPeriodFormPopup } from 'src/components/accounting-period-list/accounting-period-form-popup';
import { AccountingPeriodFormModal } from 'src/components/accounting-period-list/accounting-period-form-modal';
import AccountingPeriodListTableColumns from 'src/components/accounting-period-list/accounting-period-list-table-columns';
import {
    DEFAULT_ITEMS_PER_PAGE,
    NO_ACCOUNTING_PERIOD_RECORDS,
    USER_FEATURES,
} from 'src/constants';
import { PageHeader } from '../shared/pageHeader';
import type { GetAccountingPeriodsQuery } from 'src/apollo/queries/accounting-period/__generated__/get-accounting-periods-list';
import './styles.scss';

type AbacusAccountingPeriods =
    GetAccountingPeriodsQuery['abacusAccountingPeriods']['items'][0];

const AccountingPeriodList: React.FC = () => {
    const [isAccountingPeriodModalOpened, setIsAccountingPeriodModalOpened] =
        useState<boolean>(false);
    const [accountingPeriods, setAccountingPeriods] = useState<
        AbacusAccountingPeriods[] | []
    >([]);
    const [totalCount, setTotalCount] = useState<number>(0);
    const [currentStatementPeriod, setCurrentStatementPeriod] = useState<{
        statementPeriodId: string;
        statementPeriodName: string;
    }>({
        statementPeriodId: '',
        statementPeriodName: '',
    });

    const [pageSize, setPageSize] = useState<number>(DEFAULT_ITEMS_PER_PAGE);
    const [page, setPage] = useState<number>(0);

    const { data, loading, error } = useAccountingPeriodList(
        pageSize,
        page * pageSize
    );

    const { data: statementPeriod } = useStatementPeriodCurrentPeriod();

    const isFeatureMigrateTsxEnabled = useFeatureFlag(
        USER_FEATURES.ABACUS_ACCOUNTING_PERIOD_DETAIL_MIGRATE_TO_TSX
    );

    const onNewAccountingPeriodClick = () => {
        setIsAccountingPeriodModalOpened(true);
    };

    useEffect(() => {
        if (isEmpty(data)) {
            return;
        }

        const items = data.abacusAccountingPeriods?.items || [];
        const totalCount = data.abacusAccountingPeriods?.totalCount || 0;

        setTotalCount(totalCount);
        setAccountingPeriods(items);
    }, [data]);

    useEffect(() => {
        if (
            !isEmpty(statementPeriod) &&
            statementPeriod?.abacusCurrentStatementPeriod
        ) {
            setCurrentStatementPeriod(
                statementPeriod?.abacusCurrentStatementPeriod
            );
        }
    }, [statementPeriod]);

    const { graphqlError, networkErrors, message }: any = error || {};

    return (
        <div className="AccountingPeriodList">
            {graphqlError && (
                <Alert
                    variant="error"
                    text={
                        <span>
                            <strong>GraphQL Error: </strong>
                            {graphqlError}
                        </span>
                    }
                />
            )}
            {networkErrors && (
                <Alert
                    variant="error"
                    text={
                        <span>
                            <strong>Network Message: </strong>
                            {networkErrors}
                        </span>
                    }
                />
            )}
            {message && (
                <Alert
                    variant="error"
                    text={
                        <span>
                            <strong>Error Message: </strong>
                            {message}
                        </span>
                    }
                />
            )}
            <PageHeader title="Accounting Periods">
                <Button
                    className="AddNewButton ml-auto"
                    variant="primary"
                    onClick={onNewAccountingPeriodClick}
                >
                    + New Accounting Period
                </Button>
            </PageHeader>
            <div>
                {isFeatureMigrateTsxEnabled ? (
                    <AccountingPeriodFormModal
                        isAccountingPeriodFormModalOpen={
                            isAccountingPeriodModalOpened
                        }
                        onCloseHandler={() =>
                            setIsAccountingPeriodModalOpened(false)
                        }
                        currentStatementPeriod={currentStatementPeriod}
                        setPage={setPage}
                    />
                ) : (
                    <AccountingPeriodFormPopup
                        isModalOpen={isAccountingPeriodModalOpened}
                        onCloseHandler={() =>
                            setIsAccountingPeriodModalOpened(false)
                        }
                        currentStatementPeriod={currentStatementPeriod}
                        setPage={setPage}
                    />
                )}
            </div>
            <div>
                <GridTable
                    stickyHeader
                    bordered
                    totalCount={totalCount}
                    page={page}
                    pageSize={pageSize}
                    paginated
                    onPageChange={setPage}
                    onPageSizeChange={setPageSize}
                    showUpdateIndicator
                    columnDefs={AccountingPeriodListTableColumns()}
                    data={accountingPeriods}
                    loading={loading}
                    loadingRows={5}
                    className="AccountingPeriodListTable"
                    rowKey="accountingPeriodId"
                    emptyStateTitle={NO_ACCOUNTING_PERIOD_RECORDS}
                />
            </div>
        </div>
    );
};

export default AccountingPeriodList;