import React, {PureComponent} from "react";
import {Treebeard} from "@eater/react-treebeard";
import style from "../style";
import Toggle from "./LoreTree/Toggle";
import Header from "./LoreTree/Header";

const decorators = {
  Loading: (props) => {
    return (
      <div style={props.style}>
        loading...
      </div>
    );
  },
  Toggle,
  Header,
  Container: (props) => {
    return (
      <div style={{
        paddingLeft: props.depth * (props.style.toggle.width + 6),
        backgroundColor: (props.node.active ? style.colorBackgroundLight : null)
      }}
           onClick={props.onSelect} onDoubleClick={props.onClick}>
        <props.decorators.Toggle onClick={props.onClick} style={props.style} terminal={props.terminal}
                                 node={props.node}/>
        <props.decorators.Header style={props.style} terminal={props.terminal} node={props.node}/>
      </div>
    );
  }
};

export default class LoreTree extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      // Random data to test for now
      data: [{
        name: 'Lore',
        children: [
          {
            name: 'Events',
            children: [
              {name: 'Battle of Heck'},
              {name: 'Treaty Of Fuck'}
            ]
          }
        ]
      }]
    }
  }

  onToggle(node, toggled) {
    const {data} = this.state;
    if (node.children) {
      node.toggled = toggled;
    }

    this.setState(() => ({data: [].concat(data)}));
  }

  onSelect(node) {
    const {cursor, data} = this.state;
    // `node` is already our cursor, quick return
    if (cursor === node) {
      return;
    }

    if (cursor) {
      cursor.active = false;
    }

    node.active = true;
    this.setState(() => ({cursor: node, data: [].concat(data)}));
  }

  render() {
    return (<Treebeard data={this.state.data} style={style.theme.treebeard} decorators={decorators}
                       onToggle={this.onToggle.bind(this)} onSelect={this.onSelect.bind(this)}/>)
  }
}