import React, { useState } from 'react';
import { Button, FullscreenModal } from '@theorchard/suite-components';
import { ABACUS_ACTION_STATUSES } from '@theorchard/accounting-apps-shared';
import BulkEntityEditUploadFileScreen from 'src/components/contract-bulk-edit/common/file-select/bulk-entity-edit-upload-file-screen';

export interface BulkEntityEditImportModalPropTypes {
    isModalOpen: boolean;
    setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
    onFileSelected: (file: File) => void;
}

export const BulkEntityEditImportModal: React.FC<
    BulkEntityEditImportModalPropTypes
> = ({ isModalOpen, setIsModalOpen, onFileSelected }) => {
    const [modalState] = useState<string>(ABACUS_ACTION_STATUSES.INIT);

    const resetToInitialState = () => {};

    const handleModalClose = () => {
        resetToInitialState();
        setIsModalOpen(false);
    };

    const renderModalState = () => {
        if (modalState === ABACUS_ACTION_STATUSES.INIT) {
            return (
                <BulkEntityEditUploadFileScreen
                    onFileSelected={file => {
                        onFileSelected(file);
                        handleModalClose();
                    }}
                />
            );
        }
    };

    return (
        <FullscreenModal
            className="BulkEntityEditUploadFileScreen"
            isOpen={isModalOpen}
            layout="fluid"
            onRequestClose={handleModalClose}
        >
            <FullscreenModal.Header title="Add Bulk Edit File">
                <Button
                    onClick={handleModalClose}
                    testId="headerButton"
                    variant="tertiary"
                >
                    Cancel
                </Button>
            </FullscreenModal.Header>
            {renderModalState()}
        </FullscreenModal>
    );
};

export default BulkEntityEditImportModal;