// Lib
import React, {Component} from 'react';
import {withNamespaces} from 'react-i18next';
import {Droppable, Draggable} from 'react-beautiful-dnd';
import StyleGrid from '../../lib/StyleGrid';
import {withTheme, injectSheet} from '../../lib/theme';
import BlockSelectionFactory from './BlockSelectionFactory';

const styling = theme => ({
    wrapper: {
        display: 'flex',
        width: '100%',
        [StyleGrid.mdUp]: {
            display: 'block',
            width: 'auto',
            height: '100%',
            maxHeight: '100vh',
        },
        margin: '21px 0',
        '&.doctree--blocks-wrapper': {
            minHeight: '50px',
            padding: '0 ' + theme.gutter.base + 'px',
            background: 'rgba(50, 50, 50, 0.2)',
            transition: '0.2s linear background',
            overflow: 'auto'
        },
        '& .doctree--block-item': {
            position: 'relative',
            margin: theme.gutter.base * 2 + 'px 0'
        },
        '& .doctree--block-item--inner': {
            position: 'relative',
            minHeight: '20px',
            padding: theme.gutter.base * 2 + 'px ' + theme.gutter.base * 3 + 'px',
        },
        '& .doctree--block-item.sortable-chosen': {},
        '& .doctree--block-item .doctree--block-item--drag-handle': {},
        '& .doctree--block-item.sortable-chosen .doctree--block-item--inner': {
            transition: '0.2s linear background',
        },
    },
});

class BlockSelection extends Component {

    render() {
        const {classes, blocks, t} = this.props;

        return (
            <Droppable droppableId='BlockSelection'
                       isDropDisabled={true}
                       direction={'horizontal'}
                       ignoreContainerClipping={true}>
                {(provided, snapshot) => (
                    <div className={classes.wrapper + ' doctree--blocks-wrapper ' + (snapshot.isDraggingOver ? 'targeted' : '')}
                         ref={provided.innerRef}
                         {...provided.droppableProps}
                    >
                        <h4 style={{padding: '6px', textAlign: 'center', marginBottom: 0}}>{t('doctree.selection')}</h4>
                        {blocks.map((elem, i) => {
                            return (
                                <Draggable key={i}
                                           draggableId={'BlockSelection#' + i}
                                           index={i}>
                                    {(provided, snapshot) => (
                                        <BlockSelectionFactory provided={provided}
                                                               isDragging={snapshot.isDragging}
                                                               isOverTarget={null !== snapshot.draggingOver}
                                                               data={elem}/>
                                    )}
                                </Draggable>
                            );
                        })}

                        {provided.placeholder}

                    </div>
                )}
            </Droppable>
        );
    }
}

export default withNamespaces('page--content-article')(withTheme(injectSheet(styling)(BlockSelection)));