import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from 'amos-icon';
import Animate from 'ray-animate';
import DragConnect from './DragConnect';

import SortCardPanel from './SortCardPanel';


const dragableContainersDecorator = DragConnect.dragableContainersDecorator;
const dragableGroupDecorator = DragConnect.dragableGroupDecorator;

class SortGraph extends Component {

  static propTypes = {
    cardPanelDataArr: PropTypes.array,
    onCardAdd: PropTypes.func
  };

  componentDidMount() {
    const sc = this.sortContainer;
    this.containersDecorator(sc);
    // this.groupDecorator(sc);
  }


  containersDecorator = (htmlEle) => {
    dragableContainersDecorator(htmlEle, {
      handle: `.card-header`,
      filter: '.drag-card-add'
    });
  }

  groupDecorator = (htmlEle) => {
    dragableGroupDecorator(htmlEle, {
      draggable: 'li', // Specifies which items inside the element should be dragable
      group: 'cardlists' // To drag elements from one list into another, you should set same `group` value.
    });
  }

  executeAddCard = () => {
    const { onCardAdd } = this.props;
    onCardAdd && onCardAdd();
  }

  render() {
    const { cardPanelDataArr } = this.props;

    return (
      <div className="scene-graph-container">
        <ul className="layout-wrapper" ref={node => this.sortContainer = node}>
          {cardPanelDataArr.map((item, index) => {
            const { uid, cardOptions } = item;
            if (cardOptions.isAddFrame) {
              return (
                <li key={uid} className="card-item-layout drag-card-add">
                  <div className="card-frame" onClick={this.executeAddCard}>
                    <div className="align-center">
                      <Icon icon="add2" size="5x" />
                    </div>
                  </div>
                </li>
              );
            } else {
              return (
                <Animate
                  key={`sortGraph-${uid}`}
                  transitionName="fade"
                  showProp="data-index"
                  component=""
                >
                  <li key={uid} className="card-item-layout" data-index={index}>
                    <SortCardPanel
                      panelUID={uid}
                      cardOptions={cardOptions}
                    />
                  </li>
                </Animate>
              );
            }
          })}
        </ul>
      </div>
    );
  }
}

export default SortGraph;
