import React, { useState } from 'react';
import { Button, useToast } from '@theorchard/suite-components';
import './styles.scss';
import { PageHeader } from 'src/components/shared/pageHeader';
import { getProjectTransferDetail } from 'src/urls/frontend-royalties';
import CreateTransferForm from './create-transfer/create-transfer-form';
import TransferList from './transfer-list';

const TransferProjects: React.FC = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const toast = useToast();

    const handleTransferSuccess = (jobId: string) => {
        toast(
            <div>
                Transfer {jobId} has been queued.&nbsp;
                <a href={getProjectTransferDetail(jobId)}>View it here.</a>
            </div>
        );
    };

    return (
        <div className="TransferProjects">
            <PageHeader title="Transfer Projects">
                <Button
                    className="ml-auto"
                    variant="primary"
                    onClick={() => setIsModalOpen(true)}
                >
                    New Transfer
                </Button>
            </PageHeader>
            <TransferList />
            <CreateTransferForm
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
                onSuccess={handleTransferSuccess}
            />
        </div>
    );
};

export default TransferProjects;