import React from 'react';
import {withNamespaces} from 'react-i18next';

import {injectSheet, withTheme} from '../../lib/theme';
import StyleGrid from "../../lib/StyleGrid";
import Loading from "../../component/Loading";
import ContentItem from './ContentItem';

const theming = (theme) => ({
    wrapper: {
        margin: theme.gutter.base * 4 + 'px 0',
        [StyleGrid.smUp]: {},
        '&.list': {
            display: 'flex',
            flexWrap: 'wrap',
        },
        '&.grid': {
            display: 'grid',
            gridTemplateColumns: '1fr',
            gridColumnGap: theme.gutter.base * 4 + 'px',
            gridRowGap: theme.gutter.base * 4 + 'px',
            [StyleGrid.smUp]: {
                gridTemplateColumns: '1fr 1fr',
            },
            [StyleGrid.mdUp]: {},
            [StyleGrid.lgUp]: {
                gridTemplateColumns: '1fr 1fr 1fr 1fr'
            }
        }
    },
});

class ContentPane extends React.Component {

    render() {
        const {
            t, theme, classes,
            list, loaded,
            gotoSubDir, currentDir,
            deleteDir, renameDir, deleteFile, renameFile,
            onSelect, selectFile, selectDir, multiple, selected,
            hasSelected, viewMode
        } = this.props;

        let path_slug = '';
        if(currentDir) {
            path_slug = currentDir;
        }

        return (
            <div className={classes.wrapper + ' ' + viewMode}>
                {('progress' === loaded || 'error' === loaded ?
                    <Loading style={{
                        wrapper: {margin: 0},
                        item: ('error' === loaded ? {borderColor: theme.errorColor} : {}),
                    }}/> :
                    null)}

                {true === loaded && list ?
                    <React.Fragment>
                        {list.dir && 0 < list.dir.length ?
                            list.dir.map((dir, i) => (
                                <ContentItem key={i}
                                             className={classes.item}
                                             type='dir'
                                             item={dir}
                                             viewMode={viewMode}
                                             gotoSubDir={gotoSubDir}
                                             deleteDir={deleteDir}
                                             renameDir={renameDir}
                                             hasSelected={hasSelected}
                                             multiple={multiple}
                                             selected={(selected && selected['dir'] && selected['dir'][path_slug + '/' + dir.name] ? true : false)}
                                             onSelect={selectDir ? onSelect : false}
                                />
                            )) : null}

                        {list.file && 0 < list.file.length ?
                            list.file.map((file, i) => (
                                <ContentItem key={i}
                                             className={classes.item}
                                             type='file'
                                             item={file}
                                             viewMode={viewMode}
                                             deleteFile={deleteFile}
                                             renameFile={renameFile}
                                             hasSelected={hasSelected}
                                             multiple={multiple}
                                             selected={(selected && selected['file'] && selected['file'][path_slug + '/' + file.name] ? true : false)}
                                             onSelect={selectFile ? onSelect : false}
                                />
                            )) : null}

                        {((!list.dir || 0 === list.dir.length) && (!list.file || 0 === list.file.length)) ?
                            t('nothing-in-dir') : null}
                    </React.Fragment>
                    : null}
            </div>
        );
    }
}

export default withNamespaces('file-explorer')(withTheme(injectSheet(theming)(ContentPane)));