import React, {Component} from 'react';
import {withNamespaces} from 'react-i18next';
import {withTheme, injectSheet} from '../../lib/theme';

import BlockTree from './BlockTree';

const styling = theme => ({
    wrapper: {
        margin: '15px 0',
        minHeight: '100%'
    },
});

class DocTreeEditor extends Component {

    constructor(props) {
        super(props);

        this.block_root = [];
        this.blocks = {};

        const {data, blockroot} = this.props;

        if(data && blockroot) {
            blockroot.forEach((root_name, i) => {
                let d = {};
                if(data[root_name]) {
                    d = data[root_name];
                }

                // build content blocks for current root block
                this.blocks[root_name] = [];

                // add `default` containing blocks
                if('object' === typeof d.children && 0 < d.children.length) {
                    this.blocks[root_name] = d.children;
                }

                // add current root block
                this.block_root.push(root_name);
            });
        } else {
            if(!data) {
                console.error('DocTreeEditor: error, no `data` specified.');
            }
            if(!blockroot) {
                console.error('DocTreeEditor: error, no `blockroot` specified.');
            }
        }
    }

    componentWillUnmount() {
        // todo: split construct to here
    }

    componentDidMount() {
        // todo: split construct to here
    }

    render() {
        const {classes, t, addSave, rmSave, blockSelection} = this.props;
        if(this.block_root && this.blocks) {
            return (
                <div className={classes.wrapper}>
                    <BlockTree root_blocks={this.block_root}
                               blocks={this.blocks}
                               t={t}
                               blockSelection={blockSelection}
                               addSave={addSave}
                               rmSave={rmSave}
                    />
                </div>
            );
        } else {
            return null
        }
    }
}

export default withNamespaces('defaults--doc-tree')(withTheme(injectSheet(styling)(DocTreeEditor)));