import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { SortableContainer, SortableElement } from 'ray-hoc-sortable';
import SortCardPanel from './SortCardPanel';
import AddCardPanel from './../AddCardPanel';

const SortableItem = SortableElement(({ panelUID, ...props }) => <li key={panelUID} className="card-item-layout"><SortCardPanel {...props} /></li>);

const SortableList = SortableContainer(({ items }) => {
  return (
    <div className="scene-graph-container">
      <ul className="layout-wrapper">
        {items.map((item, index) => {
          const { uid, cardOptions } = item;
          if (cardOptions.isAddFrame) {
            return <AddCardPanel />;
          } else {
            return <SortableItem key={uid} index={index} cardOptions={cardOptions} panelUID={uid} />;
          }
        })}
      </ul>
    </div>
  );
});

class SortGraph extends Component {

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

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

    return <SortableList items={cardPanelDataArr} onSortEnd={onSortEnd} />;
  }
}

export default SortGraph;
