import React from 'react';
import Paper from '@material-ui/core/Paper';
import uuidv4 from 'uuid/v4';

import TreeContext from './contexts/TreeContext';

import Node from './components/Node';
import NodeEditor from './components/NodeEditor';

class Editor extends React.Component {
  state = { nodes: {}, root: {}, selected: null };
  componentDidMount = () => {
    const rootNode = {
      uuid: uuidv4(),
      style: {
        display: 'flex',
      },
      children: [],
    };
    this.setState({
      nodes: {
        [rootNode.uuid]: rootNode,
      },
      root: rootNode.uuid,
      selected: rootNode.uuid,
    });
  };
  insertNode = (uuid, insert) => {
    const { nodes } = this.state;
    const node = { ...nodes[uuid] };
    node.children.push(insert.uuid);
    this.setState({
      nodes: {
        ...nodes,
        [node.uuid]: node,
        [insert.uuid]: insert,
      },
    });
  };
  selectNode = uuid => {
    const { selected } = this.state;
    if (selected !== uuid) {
      this.setState({ selected: uuid });
    }
  };
  updateNode = update => {
    const { nodes } = this.state;
    this.setState({
      nodes: {
        ...nodes,
        [update.uuid]: update,
      },
    });
  };
  render() {
    const { nodes, root, selected } = this.state;
    return (
      <TreeContext.Provider
        value={{
          insertNode: this.insertNode,
          nodes,
          root,
          selected,
          selectNode: this.selectNode,
          updateNode: this.updateNode,
        }}
      >
        <div>
          <div
            style={{
              flex: 1,
              padding: '0 382px 16px 16px',
            }}
          >
            <Node uuid={root} />
          </div>
          <NodeEditor />
        </div>
      </TreeContext.Provider>
    );
  }
}

export default Editor;