import React, { Component } from 'react';
import Group from './Group';
import Item from './Item';

export default class Kanban extends Component {
  static Group = Group;
  static Item = Item;
  state = {
    childOrder: React.Children.map(this.props.children, (d, i) => i)
  }
  showPlace = (offset, container, isAfter) => { 
    this.place.style.width = offset.width + 'px';
    this.place.style.height = offset.height + 'px';
    this.place.style.margin = '10px 10px 10px 10px';
    this.place.style.display = 'inline-block';
    if (isAfter) {
      jQuery(container).after(this.place);
    } else {
      jQuery(container).before(this.place);
    }
  }
  showItemPlace = (offset, container, isAfter) => {
    this.itemPlace.style.width = offset.width + 'px';
    this.itemPlace.style.height = offset.height + 'px';
    this.itemPlace.style.margin = '0 5px 5px 5px';
    this.itemPlace.style.display = 'inline-block';
    if (isAfter) {
      jQuery(container).after(this.itemPlace);
    } else {
      jQuery(container).before(this.itemPlace);
    }
  }
  hidePlace = () => {
    this.place.style.removeProperty('left');
    this.place.style.removeProperty('top');
    this.place.style.removeProperty('width');
    this.place.style.removeProperty('height');
    this.place.style.removeProperty('display');
    this.itemPlace.style.removeProperty('left');
    this.itemPlace.style.removeProperty('top');
    this.itemPlace.style.removeProperty('width');
    this.itemPlace.style.removeProperty('height');
    this.itemPlace.style.removeProperty('display');
  }
  onChange = () => {
    let groups = [];
    jQuery(this.container).find('.kanban-group').each((index, ele) => {
      const currentGroup = []
      let group_id = jQuery(ele).attr("data-value");
      jQuery(ele).find('.kanban-item').each((index, item) => {
        currentGroup[index] = jQuery(item).attr('data-value');
        let item_id = jQuery(item).attr("data-value");
      })
      groups[index] = {'groupid':group_id,items:currentGroup};
    });
    this.props.onChange && this.props.onChange({datas:JSON.stringify(groups)});
  }
  render() {
    return (
      <div ref={ref => this.scroller = ref} className="kanban-scroller" >
        <div ref={ref => this.container = ref} className="kanban-container" style={{ minWidth: (React.Children.count(this.props.children) + 1) * 320 }}>
          {
            React.Children.map(this.props.children, child => {
              return child.toString() === '[object Object]' ? React.Children.map(child, c => {
                return React.cloneElement(c, { root: this, scroller: this.scroller })
              }) : React.cloneElement(child, { root: this, scroller: this.scroller })
            })
          }
          <div className="kanban-group-place" ref={ref => this.place = ref} />
          <div className="kanban-group-item-place" ref={ref => this.itemPlace = ref} />
          {this.props.addAction}
        </div>
      </div>
    );
  }
}