import React, { useMemo } from 'react';
import { Dropdown, Pagination, Tag } from 'antd';
import { Button, Icon, Input } from '@pisell/materials';
import { CheckOutlined, DeleteOutlined, EditOutlined, MoreOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import "./index.less";
var getOnlineStatusColor = function getOnlineStatusColor(status) {
  if (status === 'online') return 'green';
  if (status === 'unknown') return 'default';
  return 'red';
};
var DeviceTable = function DeviceTable(_ref) {
  var data = _ref.data,
    loading = _ref.loading,
    search = _ref.search,
    page = _ref.page,
    pageSize = _ref.pageSize,
    linkingDeviceId = _ref.linkingDeviceId,
    getText = _ref.getText,
    translation = _ref.translation,
    onSearchChange = _ref.onSearchChange,
    onPageChange = _ref.onPageChange,
    onAdd = _ref.onAdd,
    onLink = _ref.onLink,
    onTakeover = _ref.onTakeover,
    onEdit = _ref.onEdit,
    onDelete = _ref.onDelete;
  var pagedData = useMemo(function () {
    var start = (page - 1) * pageSize;
    return data.slice(start, start + pageSize);
  }, [data, page, pageSize]);
  var renderAction = function renderAction(record) {
    var isLinking = linkingDeviceId === record.id;
    var isDisabled = Boolean(linkingDeviceId);
    if (record.isCurrent) {
      return /*#__PURE__*/React.createElement(Button, {
        className: "saas-app-device-planning-device-table__current-button",
        icon: /*#__PURE__*/React.createElement(CheckOutlined, null),
        disabled: true
      }, getText('pisell2.saas.device-planning.action.current-device'));
    }
    if (record.link === 'linked') {
      return /*#__PURE__*/React.createElement(Button, {
        type: "primary",
        className: "saas-app-device-planning-device-table__takeover-button",
        icon: /*#__PURE__*/React.createElement(Icon, {
          type: "ThunderboltOutlined"
        }),
        loading: isLinking,
        disabled: isDisabled,
        onClick: function onClick() {
          return onTakeover(record);
        }
      }, getText('pisell2.saas.device-planning.action.takeover'));
    }
    return /*#__PURE__*/React.createElement(Button, {
      type: "primary",
      icon: /*#__PURE__*/React.createElement(Icon, {
        type: "LinkOutlined"
      }),
      loading: isLinking,
      disabled: isDisabled,
      onClick: function onClick() {
        return onLink(record);
      }
    }, getText('pisell2.saas.device-planning.action.link'));
  };
  var getMenuItems = function getMenuItems(record) {
    return [{
      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(record);
      }
    }, {
      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(record);
      }
    }];
  };
  var emptyContent = /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-device-table__empty"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "SettingOutlined"
  }), /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-device-table__empty-title"
  }, getText('pisell2.saas.device-planning.empty.devices-title')), /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-device-table__empty-desc"
  }, getText('pisell2.saas.device-planning.empty.devices-desc')), /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
    onClick: onAdd
  }, getText('pisell2.saas.device-planning.add-device')));
  return /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-device-table"
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-device-table__toolbar",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-device-table__filters",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement(Input, {
    allowClear: true,
    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
    value: search,
    placeholder: getText('pisell2.saas.device-planning.search-devices'),
    onChange: function onChange(event) {
      return onSearchChange(event.target.value);
    },
    style: {
      width: '100%'
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: classNames('saas-app-device-planning-device-table__cards', {
      'is-loading': loading
    })
  }, pagedData.length ? /*#__PURE__*/React.createElement("div", {
    className: "saas-app-device-planning-device-table__cards-grid"
  }, pagedData.map(function (record) {
    var _record$_raw$workarea;
    return /*#__PURE__*/React.createElement("div", {
      key: record.id,
      className: "saas-app-device-planning-device-table__card"
    }, /*#__PURE__*/React.createElement("div", {
      className: "saas-app-device-planning-device-table__card-header"
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: "saas-app-device-planning-device-table__name"
    }, /*#__PURE__*/React.createElement("span", null, record.name || '-'), record.isCurrent ? /*#__PURE__*/React.createElement(Tag, {
      color: "blue",
      className: "saas-app-device-planning-device-table__current-tag"
    }, getText('pisell2.saas.device-planning.action.current')) : record.isLastUsed ? /*#__PURE__*/React.createElement(Tag, {
      color: "blue",
      className: "saas-app-device-planning-device-table__current-tag"
    }, getText('pisell2.saas.device-planning.action.last-used')) : null), /*#__PURE__*/React.createElement("div", {
      className: "saas-app-device-planning-device-table__workarea"
    }, translation((_record$_raw$workarea = record._raw.workarea) === null || _record$_raw$workarea === void 0 ? void 0 : _record$_raw$workarea.description) || (record._raw.workarea ? translation(record._raw.workarea.name) : ''))), /*#__PURE__*/React.createElement(Dropdown, {
      trigger: ['click'],
      menu: {
        items: getMenuItems(record)
      },
      placement: "bottomRight"
    }, /*#__PURE__*/React.createElement(Button, {
      type: "text",
      className: "saas-app-device-planning-device-table__more",
      icon: /*#__PURE__*/React.createElement(MoreOutlined, null),
      onClick: function onClick(event) {
        return event.stopPropagation();
      }
    }))), /*#__PURE__*/React.createElement("div", {
      className: "saas-app-device-planning-device-table__tags"
    }, /*#__PURE__*/React.createElement(Tag, {
      color: record.link === 'linked' ? 'blue' : 'default'
    }, getText("pisell2.saas.device-planning.status.".concat(record.link)) || record.link), (record === null || record === void 0 ? void 0 : record.link) === 'linked' ? /*#__PURE__*/React.createElement(Tag, {
      color: record.status === 'online' ? 'green' : 'red'
    }, getText("pisell2.saas.device-planning.status.".concat(record.status)) || record.status) : null), /*#__PURE__*/React.createElement("div", {
      className: "saas-app-device-planning-device-table__info"
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.column.device-model')), /*#__PURE__*/React.createElement("strong", null, record.modelName || '-')), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.column.profile')), /*#__PURE__*/React.createElement("strong", null, record.profileName || '-')), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.column.hardware')), /*#__PURE__*/React.createElement("strong", null, record.modelName || '-'))), /*#__PURE__*/React.createElement("div", {
      className: "saas-app-device-planning-device-table__action"
    }, renderAction(record)));
  })) : emptyContent), data.length > pageSize ? /*#__PURE__*/React.createElement(Pagination, {
    className: "saas-app-device-planning-device-table__pagination",
    current: page,
    pageSize: pageSize,
    total: data.length,
    showSizeChanger: true,
    onChange: onPageChange
  }) : null);
};
export default DeviceTable;