import React from 'react';
import { Dropdown, Empty, Spin } from 'antd';
import { Button, Icon } from '@pisell/materials';
import { DeleteOutlined, EditOutlined, MoreOutlined, PlusOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import "./index.less";
var WorkAreaListItem = function WorkAreaListItem(_ref) {
  var item = _ref.item,
    selected = _ref.selected,
    title = _ref.title,
    getText = _ref.getText,
    onSelect = _ref.onSelect,
    onEdit = _ref.onEdit,
    onDelete = _ref.onDelete;
  var menuItems = item ? [{
    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", {
    className: classNames('saas-app-device-planning-workarea-item', {
      'is-selected': selected
    }),
    onClick: function onClick() {
      return onSelect(item === null || item === void 0 ? void 0 : item.id);
    }
  }, item ? null : /*#__PURE__*/React.createElement("span", {
    className: "saas-app-device-planning-workarea-item__icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "AppstoreOutlined",
    color: selected ? '#1677ff' : '#999'
  })), /*#__PURE__*/React.createElement("span", {
    className: "saas-app-device-planning-workarea-item__name"
  }, title), item ? /*#__PURE__*/React.createElement(Dropdown, {
    trigger: ['click'],
    menu: {
      items: menuItems
    },
    placement: "bottomRight"
  }, /*#__PURE__*/React.createElement(Button, {
    type: "text",
    className: "saas-app-device-planning-workarea-item__more",
    icon: /*#__PURE__*/React.createElement(MoreOutlined, null),
    onClick: function onClick(event) {
      return event.stopPropagation();
    }
  })) : null);
};
var WorkAreaList = function WorkAreaList(_ref4) {
  var className = _ref4.className,
    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;
  return /*#__PURE__*/React.createElement("aside", {
    className: classNames('saas-app-device-planning-sider', className)
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-sider__header"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-sider__title"
  }, getText('pisell2.saas.device-planning.work-areas')), /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-sider__desc"
  }, getText('pisell2.saas.device-planning.work-areas-desc'))), /*#__PURE__*/React.createElement(Button, {
    type: "text",
    icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
    onClick: onCreate
  })), /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-sider__list"
  }, /*#__PURE__*/React.createElement(WorkAreaListItem, {
    selected: !selectedWorkAreaId,
    title: getText('pisell2.saas.device-planning.all-work-areas'),
    getText: getText,
    onSelect: onSelect,
    onEdit: onEdit,
    onDelete: onDelete
  }), loading && !workAreas.length ? /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-sider__loading"
  }, /*#__PURE__*/React.createElement(Spin, null)) : workAreas.length ? workAreas.map(function (item) {
    return /*#__PURE__*/React.createElement(WorkAreaListItem, {
      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;