import React, { useState } from 'react';
import { Button } from '@theorchard/suite-components';
import { PageHeader } from '../shared/pageHeader';
import BulkEntityEditImportModal from 'src/components/contract-bulk-edit/common/file-select/bulk-entity-edit-import-modal';
import EntityBulkEditFileInfo from 'src/components/contract-bulk-edit/common/entity-bulk-edit-file-info';
import './styles.scss';

const ContractBulkEdit = () => {
    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
    const handleModalOpen = () => {
        setIsModalOpen(true);
    };
    const [file, setFile] = useState<File | null>(null);

    return (
        <div className="ContractBulkEdit">
            <PageHeader title="Contracts Bulk Edit">
                <span className="ml-auto">
                    <div className="SelectFileButton">
                        <Button onClick={handleModalOpen} variant={'primary'}>
                            Upload File
                        </Button>
                    </div>
                </span>
            </PageHeader>
            <BulkEntityEditImportModal
                isModalOpen={isModalOpen}
                setIsModalOpen={setIsModalOpen}
                onFileSelected={file => setFile(file)}
            />
            <EntityBulkEditFileInfo bulkEditFile={file} />
        </div>
    );
};

export default ContractBulkEdit;