import _ from 'lodash'
import EditorObject from "@sc/modules/page/Builder/EditorObject";
import * as Tools from "@sc/modules/page/Builder/Properties";
import React from "react";
import { List } from 'semantic-ui-react'
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const Properties = props => (
  <Tools.PropertiesWindow
    {...props}
    defaultTab="basic"
    tabs={[{ id: "basic", title: "List", component: BasicPropertiesTab }]}
  />
)

const SortableItem = SortableElement(({value}) => <li style={{ display: 'block', cursor: 'move', width: '100%', padding: 20, fontSize: 36, border: '1px solid #AAA' }}>{value}</li>);
const SortableList = SortableContainer(({items}) => {
  return (
    <ul style={{ width: '100%' }}>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class BasicPropertiesTab extends React.Component {

  state = { items: ['One', 'Two', 'Three', 'Four'] }

  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState(({ items }) => ({
      items: arrayMove(items, oldIndex, newIndex)
    }))
  }

  render() {

    const { settings } = this.props;

    return (
      <div style={{ width: "100%" }}>
        <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />
      </div>
    )
  }
}

export default props => {
  const { settings } = props;
  const marginTop = settings.properties ? settings.properties.marginTop : 0;
  const textAlign = settings.properties
    ? settings.properties.textAlign
    : "inherit";

  return (
    <div style={{ marginTop, textAlign }}>
      <EditorObject {...props} PropertiesView={Properties}>
        <List>
          <List.Item>Apples</List.Item>
          <List.Item>Pears</List.Item>
          <List.Item>Oranges</List.Item>
        </List>
      </EditorObject>
    </div>
  );
};