import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { Nullable } from 'tsdef';
import { selectFileData, selectIsDnDDisabled, selectIsFileSelected } from '../../redux/selectors';
import { useParamSelector } from '../../redux/store';
import { DndEntryState, FileEntryProps } from '../../types/file-list.types';
import { FileViewMode } from '../../types/file-view.types';
import { FileHelper } from '../../util/file-helper';
import { makeGlobalChonkyStyles } from '../../util/styles';
import { ClickableWrapper, ClickableWrapperProps } from '../internal/ClickableWrapper';
import { CompactEntry } from './CompactEntry';
import { DnDFileEntry } from './DnDFileEntry';
import { useFileClickHandlers } from './FileEntry-hooks';
import { GridEntry } from './GridEntry';
import { ListEntry } from './ListEntry';

export interface SmartFileEntryProps {
    fileId: Nullable<string>;
    displayIndex: number;
    fileViewMode: FileViewMode;
}

const disabledDndState: DndEntryState = {
    dndIsDragging: false,
    dndIsOver: false,
    dndCanDrop: false,
};

export const SmartFileEntry: React.FC<SmartFileEntryProps> = React.memo(({ fileId, displayIndex, fileViewMode }) => {
    const classes = useStyles();

    // Basic properties
    const file = useParamSelector(selectFileData, fileId);
    const selected = useParamSelector(selectIsFileSelected, fileId);
    const dndDisabled = useSelector(selectIsDnDDisabled);

    // Clickable wrapper properties
    const fileClickHandlers = useFileClickHandlers(file, displayIndex);
    const [focused, setFocused] = useState(false);
    const clickableWrapperProps: ClickableWrapperProps = {
        wrapperTag: 'div',
        passthroughProps: { className: classes.fileEntryClickableWrapper },
        ...(FileHelper.isClickable(file) ? fileClickHandlers : undefined),
        setFocused,
    };

    // File entry properties
    const fileEntryProps: Omit<FileEntryProps, 'dndState'> = {
        file,
        selected,
        focused,
    };

    let EntryComponent: React.FC<FileEntryProps>;
    if (fileViewMode === FileViewMode.List) EntryComponent = ListEntry;
    else if (fileViewMode === FileViewMode.Compact) EntryComponent = CompactEntry;
    else EntryComponent = GridEntry;

    return dndDisabled ? (
   <>

        <ClickableWrapper {...clickableWrapperProps}>
               
            <EntryComponent {...fileEntryProps} dndState={disabledDndState} />
        </ClickableWrapper>
   </>
    ) : (
        <DnDFileEntry file={file}>
            {dndState => (
               <>
                <ClickableWrapper {...clickableWrapperProps}>
                       
                    <EntryComponent {...fileEntryProps} dndState={dndState} />
                </ClickableWrapper>
               </>
            )}
        </DnDFileEntry>
    );
});
SmartFileEntry.displayName = 'SmartFileEntry';

const useStyles = makeGlobalChonkyStyles(() => ({
    fileEntryClickableWrapper: {
        // We disable default browser outline because Chonky provides its own outline
        // (which doesn't compromise accessibility, hopefully)
        outline: 'none !important',
        position: 'relative',
        height: '100%',
    },
    titleDisplay: {
        display: "flex",
        flexDirection: "column",
        width : "100%"

    },

}));