function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { Dropdown, Empty, Spin } from 'antd';
import { Button } from '@pisell/materials';
import { DeleteOutlined, EditOutlined, HolderOutlined, MoreOutlined, PlusOutlined } from '@ant-design/icons';
import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import classNames from 'classnames';
import "./index.less";
var SortableWorkAreaItem = function SortableWorkAreaItem(_ref) {
  var item = _ref.item,
    selected = _ref.selected,
    title = _ref.title,
    getText = _ref.getText,
    onSelect = _ref.onSelect,
    onEdit = _ref.onEdit,
    onDelete = _ref.onDelete;
  var _useSortable = useSortable({
      id: item.id
    }),
    attributes = _useSortable.attributes,
    isDragging = _useSortable.isDragging,
    listeners = _useSortable.listeners,
    setNodeRef = _useSortable.setNodeRef,
    transform = _useSortable.transform,
    transition = _useSortable.transition;
  var menuItems = [{
    key: 'edit',
    icon: /*#__PURE__*/React.createElement(EditOutlined, null),
    label: getText('pisell2.saas.device-planning.action.edit'),
    onClick: function onClick(_ref2) {
      var domEvent = _ref2.domEvent;
      domEvent.stopPropagation();
      onEdit(item);
    }
  }, {
    key: 'delete',
    danger: true,
    icon: /*#__PURE__*/React.createElement(DeleteOutlined, null),
    label: getText('pisell2.saas.device-planning.action.delete'),
    onClick: function onClick(_ref3) {
      var domEvent = _ref3.domEvent;
      domEvent.stopPropagation();
      onDelete(item);
    }
  }];
  return /*#__PURE__*/React.createElement("div", {
    ref: setNodeRef,
    className: classNames('saas-device-planning-workarea-item', {
      'is-selected': selected,
      'is-dragging': isDragging
    }),
    style: {
      transform: CSS.Transform.toString(transform),
      transition: transition
    },
    onClick: function onClick() {
      return onSelect(item.id);
    }
  }, /*#__PURE__*/React.createElement("span", _extends({
    className: "saas-device-planning-workarea-item__drag"
  }, attributes, listeners), /*#__PURE__*/React.createElement(HolderOutlined, null)), /*#__PURE__*/React.createElement("span", {
    className: "saas-device-planning-workarea-item__name"
  }, title), /*#__PURE__*/React.createElement(Dropdown, {
    trigger: ['click'],
    menu: {
      items: menuItems
    },
    placement: "bottomRight"
  }, /*#__PURE__*/React.createElement(Button, {
    type: "text",
    className: "saas-device-planning-workarea-item__more",
    icon: /*#__PURE__*/React.createElement(MoreOutlined, null),
    onClick: function onClick(event) {
      return event.stopPropagation();
    }
  })));
};
var WorkAreaList = function WorkAreaList(_ref4) {
  var loading = _ref4.loading,
    workAreas = _ref4.workAreas,
    selectedWorkAreaId = _ref4.selectedWorkAreaId,
    getText = _ref4.getText,
    translation = _ref4.translation,
    onCreate = _ref4.onCreate,
    onSelect = _ref4.onSelect,
    onEdit = _ref4.onEdit,
    onDelete = _ref4.onDelete,
    onSortEnd = _ref4.onSortEnd;
  var sensors = useSensors(useSensor(PointerSensor, {
    activationConstraint: {
      distance: 8
    }
  }), useSensor(KeyboardSensor, {
    coordinateGetter: sortableKeyboardCoordinates
  }));
  return /*#__PURE__*/React.createElement("aside", {
    className: "saas-device-planning-sider"
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-device-planning-sider__header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-device-planning-sider__title"
  }, getText('pisell2.saas.device-planning.work-areas')), /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    size: "middle",
    icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
    onClick: onCreate
  }, getText('pisell2.saas.device-planning.create'))), /*#__PURE__*/React.createElement("div", {
    className: "saas-device-planning-sider__list"
  }, loading && !workAreas.length ? /*#__PURE__*/React.createElement("div", {
    className: "saas-device-planning-sider__loading"
  }, /*#__PURE__*/React.createElement(Spin, null)) : workAreas.length ? /*#__PURE__*/React.createElement(DndContext, {
    sensors: sensors,
    collisionDetection: closestCenter,
    onDragEnd: onSortEnd
  }, /*#__PURE__*/React.createElement(SortableContext, {
    items: workAreas.map(function (item) {
      return item.id;
    }),
    strategy: verticalListSortingStrategy
  }, workAreas.map(function (item) {
    return /*#__PURE__*/React.createElement(SortableWorkAreaItem, {
      key: item.id,
      item: item,
      title: translation(item.name),
      selected: item.id === selectedWorkAreaId,
      getText: getText,
      onSelect: onSelect,
      onEdit: onEdit,
      onDelete: onDelete
    });
  }))) : /*#__PURE__*/React.createElement(Empty, {
    image: Empty.PRESENTED_IMAGE_SIMPLE
  })));
};
export default WorkAreaList;