import React, { useEffect, useState } from 'react';
import {
    Alert,
    GridTable,
    Modal,
    useToast,
} from '@theorchard/suite-components';
import { useFeatureFlag, useIdentity } from '@theorchard/suite-frontend';
import { Illustration } from '@theorchard/suite-icons';
import { useHistory } from 'react-router-dom';
import { useDeleteContractAdvance } from 'src/apollo/mutations/contract-advance';
import ContractAdvancePendingListTableColumns from 'src/components/contract-advance-list/contract-advance-pending-list-table-columns';
import {
    ABACUS_PROFILE,
    DEFAULT_ITEMS_PER_PAGE,
    NO_PENDING_ADVANCES,
    USER_FEATURES,
} from 'src/constants';
import { updateContractAdvance } from 'src/urls/frontend-royalties';
import {
    MILESTONES_MAP,
    MILESTONE_OPTIONS_MAP,
} from 'src/apollo/type-constants/advance';
import type { GetContractAdvancesPendingQuery } from 'src/apollo/queries/contract-advance/__generated__/get-contract-advances-pending-list';
import type { ContractAdvanceRequestParams } from 'src/types/abacus-contract-advance';

export interface ContractAdvancePendingListProps {
    pendingAdvances: GetContractAdvancesPendingQuery | undefined;
    pendingAdvancesLoading: boolean;
    pendingAdvancesRequestParams: ContractAdvanceRequestParams;
    setPendingAdvancesRequestParams: (
        params: ContractAdvanceRequestParams
    ) => void;
}

const ContractAdvancePendingList: React.FC<ContractAdvancePendingListProps> = ({
    pendingAdvances,
    pendingAdvancesLoading,
    pendingAdvancesRequestParams,
    setPendingAdvancesRequestParams,
}) => {
    const { profileType } = useIdentity();
    const [confirmDelete, setConfirmDelete] = useState<boolean>(false);
    const [deleteContractAdvanceId, setDeleteContractAdvanceId] =
        useState<number>(0);
    const [isDeleteButtonDisabled, setIsDeleteButtonDisabled] =
        useState<boolean>(false);
    const [error, setError] = useState<string>('');
    const [pageSize, setPageSize] = useState<number>(DEFAULT_ITEMS_PER_PAGE);
    const [page, setPage] = useState<number>(0);

    const toast = useToast();
    const history = useHistory();
    const tableActionsEnabled = profileType === ABACUS_PROFILE;

    const { deleteContractAdvance, loading: isDeleting } =
        useDeleteContractAdvance();

    const isFeatureMilestoneNewOptionsEnabled = useFeatureFlag(
        USER_FEATURES.ABACUS_CONTRACT_ADVANCE_MILESTONE_NEW_OPTIONS
    );
    const milestoneOptionsMap = isFeatureMilestoneNewOptionsEnabled
        ? MILESTONE_OPTIONS_MAP
        : MILESTONES_MAP;

    useEffect(() => {
        if (isDeleteButtonDisabled) setIsDeleteButtonDisabled(false);
    }, [isDeleteButtonDisabled]);

    useEffect(() => {
        setPendingAdvancesRequestParams({
            ...pendingAdvancesRequestParams,
            limit: pageSize,
            offset: page * pageSize,
        });
    }, [page, pageSize]);

    const handleDeleteContractAdvance = () => {
        setConfirmDelete(false);
        setIsDeleteButtonDisabled(true);
        const variables = {
            contractAdvanceId: String(deleteContractAdvanceId),
        };
        deleteContractAdvance({ variables })
            .then((response: any) => {
                const totalCount =
                    pendingAdvances?.abacusContractAdvancesPending
                        ?.totalCount || 0;
                if (response && response.data.abacusSoftDeleteContractAdvance)
                    toast('Deleted pending contract advance');
                if (
                    pendingAdvances?.abacusContractAdvancesPending?.items
                        ?.length === 1 &&
                    totalCount > 1
                ) {
                    setPendingAdvancesRequestParams({
                        ...pendingAdvancesRequestParams,
                        offset: 0,
                    });
                    setPage(0);
                    setIsDeleteButtonDisabled(false);
                }
            })
            .catch((e: any) => {
                setError(e);
                setIsDeleteButtonDisabled(false);
            });
    };

    const deleteModalContent = (
        <div>
            Are you sure you want to delete the selected contract advance?
        </div>
    );
    if (
        pendingAdvances?.abacusContractAdvancesPending?.totalCount === 0 &&
        !pendingAdvancesLoading
    )
        return (
            <div className="d-flex flex-column align-items-center">
                <Illustration name="emptyState" size={100} />
                <div className="ContractAdvance-no-advances">
                    {NO_PENDING_ADVANCES}
                </div>
            </div>
        );

    if (error)
        return <Alert className="errorMsg" text={error} variant="error" />;

    return (
        <>
            <GridTable
                stickyHeader
                bordered
                className="ContractAdvancePendingList-table"
                columnDefs={ContractAdvancePendingListTableColumns(
                    milestoneOptionsMap
                )}
                data={
                    pendingAdvances?.abacusContractAdvancesPending?.items || []
                }
                defaultColumnDefs={{
                    headerTextWrap: 'nowrap',
                }}
                loading={pendingAdvancesLoading || isDeleting}
                loadingRows={DEFAULT_ITEMS_PER_PAGE}
                maxHeight={500}
                page={page}
                pageSize={pageSize}
                paginated
                onPageChange={setPage}
                onPageSizeChange={setPageSize}
                showUpdateIndicator
                rowKey="contractAdvanceId"
                rowActions={
                    tableActionsEnabled
                        ? {
                              edit: (row: any) =>
                                  history.push(
                                      updateContractAdvance(
                                          row.contractId,
                                          row.contractAdvanceId
                                      )
                                  ),
                              delete: (row: any) => {
                                  setDeleteContractAdvanceId(
                                      row.contractAdvanceId
                                  );
                                  setConfirmDelete(true);
                              },
                          }
                        : {}
                }
                totalCount={
                    pendingAdvances?.abacusContractAdvancesPending
                        ?.totalCount || 0
                }
                variant="zebra"
            />
            <Modal
                className="ContractAdvancePendingList-delete-popup"
                confirmDisabled={isDeleteButtonDisabled}
                confirmTitle="Yes, delete it"
                isOpen={confirmDelete}
                onConfirm={handleDeleteContractAdvance}
                onRequestClose={
                    isDeleteButtonDisabled
                        ? () => false
                        : () => {
                              setIsDeleteButtonDisabled(false);
                              setConfirmDelete(false);
                          }
                }
                testId="deleteContractAdvance"
                title="Warning"
            >
                {deleteModalContent}
            </Modal>
        </>
    );
};

export default ContractAdvancePendingList;