import React, { useState } from 'react';
import {
    Alert,
    Button,
    LoadingPageIndicator,
    Modal,
    PageHeader,
    Status,
    Tag,
    Tooltip,
    useToast,
} from '@theorchard/suite-components';
import { Link, useHistory, useParams } from 'react-router-dom';
import { useProjectTransferTerms } from 'src/apollo/queries/transfer-terms';
import { useProjectTransferJob } from 'src/apollo/queries/transfer-projects';
import { useDeleteProjectTransferJob } from 'src/apollo/mutations/delete-project-transfer-job';
import { useAccountsByVendorIds } from 'src/apollo/queries/account';
import { useContractLabelTerms } from 'src/apollo/queries/contract';
import {
    getAccountDetail,
    getProjectTransferPage,
} from 'src/urls/frontend-royalties';
import { useTransferProjectsBreadcrumbs } from 'src/hooks/breadcrumbs/transferProjects';
import {
    formatPeriodKey,
    TRANSFER_DELETE_DISABLED_REASON,
    TRANSFER_STATUS_FILLED,
    TRANSFER_STATUS_LABEL,
    TRANSFER_STATUS_VARIANT,
} from '../transfer-list-table-columns';
import TransferTermsSection from './transfer-terms-section';
import ProjectTransferCard from './project-transfer-card';
import '../styles.scss';

const BottomMeta: React.FC<{ label: string; value: React.ReactNode }> = ({
    label,
    value,
}) => (
    <div className="TransferDetail-Header-Bottom-Item">
        <span className="TransferDetail-Header-Label">{label}&nbsp;</span>
        {value}
    </div>
);

const BottomMetaDivider: React.FC = () => (
    <div className="TransferDetail-Header-Bottom-Item-Divider" />
);

const formatDate = (iso: string | null | undefined) =>
    iso ? new Date(iso).toISOString().slice(0, 10) : '';

const TransferDetail: React.FC = () => {
    const { transferId } = useParams<{ transferId: string }>();
    const history = useHistory();
    const breadcrumbs = useTransferProjectsBreadcrumbs();
    const toast = useToast();
    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
    const [deleteError, setDeleteError] = useState<string | null>(null);
    const { deleteJob, loading: deleting } = useDeleteProjectTransferJob();

    const { job: transfer, loading } = useProjectTransferJob(transferId);
    const { terms: transferTerms, loading: termsLoading } =
        useProjectTransferTerms(transferId);

    // The destination contract is referenced by the transfer terms' contractId.
    const destinationContractId = transferTerms.find(
        t => t.contractId
    )?.contractId;
    const { contractName } = useContractLabelTerms(destinationContractId);

    const vendorIds = React.useMemo(
        () =>
            transfer
                ? [
                      transfer.originLabel.vendorId,
                      transfer.destinationLabel.vendorId,
                  ]
                : [],
        [transfer]
    );
    const { accounts } = useAccountsByVendorIds(vendorIds);
    const vendorMap = React.useMemo(
        () => new Map(accounts.map(a => [a.vendor.vendorId, a])),
        [accounts]
    );
    const originAccount = transfer
        ? vendorMap.get(transfer.originLabel.vendorId)
        : undefined;
    const destinationAccount = transfer
        ? vendorMap.get(transfer.destinationLabel.vendorId)
        : undefined;

    if (loading)
        return (
            <div
                className="d-flex justify-content-center align-items-center"
                style={{ height: '60vh' }}
            >
                <LoadingPageIndicator />
            </div>
        );

    if (!transfer) {
        return (
            <div className="TransferDetail">
                <PageHeader breadcrumbs={breadcrumbs}>
                    <PageHeader.MainContent>
                        <PageHeader.Title>Transfer not found</PageHeader.Title>
                    </PageHeader.MainContent>
                </PageHeader>
            </div>
        );
    }

    const statusVariant = TRANSFER_STATUS_VARIANT[transfer.status];
    const statusFilled = TRANSFER_STATUS_FILLED[transfer.status];
    const products = transfer.products ?? [];
    const disabledDeleteReason =
        TRANSFER_DELETE_DISABLED_REASON[transfer.status];

    return (
        <div className="TransferDetail">
            <PageHeader
                breadcrumbs={breadcrumbs}
                className="TransferDetail-header"
            >
                <PageHeader.Metadata className="TransferDetail-header-metadata">
                    <Tag variant="category" text="Transfer" />
                    <BottomMeta
                        label="Statement Period:"
                        value={
                            transfer.revenueCutoffDate
                                ? formatPeriodKey(transfer.revenueCutoffDate)
                                : '-'
                        }
                    />
                    <BottomMetaDivider />
                    <BottomMeta
                        label="From:"
                        value={
                            originAccount ? (
                                <Link
                                    to={getAccountDetail(
                                        originAccount.accountId
                                    )}
                                >
                                    {originAccount.accountName}
                                </Link>
                            ) : (
                                String(transfer.originLabel.vendorId)
                            )
                        }
                    />
                    <BottomMetaDivider />
                    <BottomMeta
                        label="To:"
                        value={
                            destinationAccount ? (
                                <Link
                                    to={getAccountDetail(
                                        destinationAccount.accountId
                                    )}
                                >
                                    {destinationAccount.accountName}
                                </Link>
                            ) : (
                                String(transfer.destinationLabel.vendorId)
                            )
                        }
                    />
                    <BottomMetaDivider />
                    <BottomMeta
                        label="Created:"
                        value={
                            <>
                                {formatDate(transfer.createdAt)}{' '}
                                <span className="TransferDetail-Header-Label">
                                    By:
                                </span>{' '}
                                {transfer.createdBy.name ??
                                    transfer.createdBy.id}
                            </>
                        }
                    />
                </PageHeader.Metadata>
                <PageHeader.MainContent className="TransferDetail-header-main-content">
                    <div className="TransferDetail-Header-Main">
                        <div className="TransferDetail-Header-Title">
                            {transfer.projectTransferJobId}
                        </div>
                        <Status
                            filled={statusFilled}
                            variant={statusVariant}
                            text={TRANSFER_STATUS_LABEL[transfer.status]}
                            size="medium"
                            className="TransferDetail-Header-Status"
                        >
                            {transfer.transferCompletedOn &&
                                formatDate(transfer.transferCompletedOn)}
                        </Status>
                    </div>
                    {disabledDeleteReason ? (
                        <Tooltip
                            id="transferDeleteButtonTooltip"
                            message={disabledDeleteReason}
                            placement="left"
                        >
                            <Button
                                data-testid="transferDeleteButton"
                                variant="secondary"
                                disabled
                            >
                                Delete
                            </Button>
                        </Tooltip>
                    ) : (
                        <Button
                            data-testid="transferDeleteButton"
                            variant="secondary"
                            disabled={deleting}
                            onClick={() => {
                                setDeleteError(null);
                                setIsDeleteModalOpen(true);
                            }}
                        >
                            Delete
                        </Button>
                    )}
                </PageHeader.MainContent>
            </PageHeader>

            <Modal
                isOpen={isDeleteModalOpen}
                title={`Delete Transfer ${transfer.projectTransferJobId}?`}
                onRequestClose={() => {
                    setIsDeleteModalOpen(false);
                    setDeleteError(null);
                }}
                cancelTitle="Cancel"
                confirmTitle="Delete"
                confirmVariant="danger"
                confirmDisabled={deleting || !!disabledDeleteReason}
                onConfirm={async () => {
                    if (disabledDeleteReason) return;
                    try {
                        await deleteJob(transfer.projectTransferJobId);
                        setIsDeleteModalOpen(false);
                        toast(
                            `Transfer ${transfer.projectTransferJobId} has been successfully deleted.`
                        );
                        history.push(getProjectTransferPage);
                    } catch (e) {
                        if (e instanceof Error) setDeleteError(e.message);
                    }
                }}
            >
                <span>Once you delete this transfer it cannot be undone.</span>
                {disabledDeleteReason && (
                    <Alert variant="error" text={disabledDeleteReason} />
                )}
                {deleteError && <Alert variant="error" text={deleteError} />}
            </Modal>

            <div className="TransferDetail-body d-flex flex-column pb-3 pt-2">
                <section className="TransferDetail-projects">
                    <h2 className="TransferDetail-projects-title h2">
                        Project to Transfer
                    </h2>
                    <ProjectTransferCard
                        projectName={
                            transfer.project.projectName ??
                            `Project ${transfer.project.projectId}`
                        }
                        projectId={transfer.project.projectId}
                        projectCode={transfer.projectCode}
                        products={products}
                        contractId={destinationContractId}
                        contractName={contractName}
                    />
                </section>

                <TransferTermsSection
                    terms={transferTerms}
                    loading={termsLoading}
                />
            </div>
        </div>
    );
};

export default TransferDetail;