import React from 'react';
import { Nullable } from 'tsdef';

import { DndEntryState } from '../../types/file-list.types';
import { FileData } from '../../types/file.types';
import { useDndHoverOpen, useFileEntryDnD } from '../../util/dnd';
import { FileHelper } from '../../util/file-helper';
import { makeLocalChonkyStyles } from '../../util/styles';

export interface DnDFileEntryProps {
    file: Nullable<FileData>;
    children: (dndState: DndEntryState) => React.ReactElement;
}

export const DnDFileEntry = React.memo(({ file, children }: DnDFileEntryProps) => {
    const { drop, drag, dndState } = useFileEntryDnD(file);

    useDndHoverOpen(file, dndState);
    const classes = useStyles();
    return (
        <div ref={drop} className={classes.fillParent}>
            <div
                ref={FileHelper.isDraggable(file) ? drag : null}
                className={classes.fillParent}
            >
                {children(dndState)}
            </div>
        </div>
    );
});

export const useStyles = makeLocalChonkyStyles(() => ({
    fillParent: {
        height: '100%',
    },
}));