// Lib
import React, {Component} from 'react';
import {Droppable, Draggable} from 'react-beautiful-dnd';

import {withTheme, injectSheet} from '../../lib/theme';
import BlockItem from './BlockItem';
import {rootBlockName} from "./BlockName";

const styling = theme => ({
    wrapper: {
        margin: '21px 0',
        '& .doctree--blocks-wrapper': {
            minHeight: '50px',
            padding: '0 ' + theme.gutter.base + 'px',
            background: theme.drop.area,
            transition: '0.2s linear background',
            overflow: 'hidden'
        },
        '& .doctree--blocks-wrapper.targeted': {
            background: theme.drop.area_targeted,
        },
        '& .doctree--block-item': {
            position: 'relative',
            margin: theme.gutter.base * 2 + 'px 0'
        },
        '& .doctree--block-item--inner': {
            position: 'relative',
            minHeight: '30px',
            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 BlockRoot extends Component {

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

        return (
            <Droppable droppableId={name}
                       ignoreContainerClipping={true}>
                {(provided, snapshot) => (
                    <div className={classes.wrapper}>

                        <h4>{rootBlockName(name, t)}</h4>

                        <div className={'doctree--blocks-wrapper ' + (snapshot.isDraggingOver ? 'targeted' : '')}
                             ref={provided.innerRef}
                             {...provided.droppableProps}
                        >
                            {blocks.map((elem, i) => {
                                return (
                                    <Draggable key={elem.uuid}
                                               draggableId={name + '#' + i}
                                               index={i}>
                                        {(provided, snapshot) => (
                                            <BlockItem
                                                uid={name + '#' + i}
                                                root_name={name}
                                                provided={provided}
                                                deleteItem={deleteItem}
                                                index={i}
                                                t={t}
                                                data={elem}
                                                isDragging={snapshot.isDragging}
                                                isOverTarget={null !== snapshot.draggingOver}
                                            />
                                        )}
                                    </Draggable>
                                );
                            })}

                            {provided.placeholder}

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

export default withTheme(injectSheet(styling)(BlockRoot));