import React, { memo } from 'react';
import { SortableContainer } from 'react-sortable-hoc';
import CategoryItem from './CategoryItem';
import CategoryAdd from './CategoryAdd';

const MySortableContainer = SortableContainer(({ children }) => {
  return <ul>{children}</ul>;
});

function CategoryList({ adding, categorys, onAdd, onUpdate, onDelete, onSort }) {
  return (
    <MySortableContainer onSortEnd={onSort} useDragHandle>
      {categorys.map((d, i) => (
        <CategoryItem key={d.id} index={i} id={d.id} name={d.name} onUpdate={onUpdate} onDelete={onDelete} />
      ))}
      {adding && <CategoryAdd onOk={onAdd} />}
    </MySortableContainer>
  );
}

export default memo(CategoryList);
