import React, { useCallback } from 'react';
import SortableList from './SortableList';

function SortableListContainer({
  type,
  layers = [],
  layersSelected,
  constants,
  mobileConstanst,
  selectLayers,
  selectLayersWithCtrl,
  selectLayersWithShift,
  resetSelect,
  sortLayers,
  updateLayersKey,
  updateLayerName,
  showContextMenu,
  hideContextMenu
}) {
  const handleSelect = useCallback(
    (e, id) => {
      e.stopPropagation();
      hideContextMenu();
      if (!id) {
        resetSelect();
      } else if (e.metaKey || e.ctrlKey) {
        selectLayersWithCtrl(id);
      } else if (e.shiftKey) {
        selectLayersWithShift(id);
      } else {
        selectLayers(id);
      }
    },
    [hideContextMenu, resetSelect, selectLayers, selectLayersWithCtrl, selectLayersWithShift]
  );

  const handleContextMenu = useCallback(
    (e, id) => {
      e.stopPropagation();
      e.preventDefault();
      showContextMenu({
        type: 'layer',
        id,
        event: e
      });
    },
    [showContextMenu]
  );

  const realConstants = type === 'mobile' ? mobileConstanst : constants;
  return (
    <SortableList
      layers={layers}
      layersSelected={layersSelected}
      constants={realConstants}
      onDragEnd={sortLayers}
      onSelect={handleSelect}
      onUpdate={updateLayersKey}
      onContextMenu={handleContextMenu}
      updateName={updateLayerName}
    />
  );
}

export default SortableListContainer;
