function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
import React, { useMemo } from 'react';
import { Input, Table, Button, Icon } from '@pisell/materials';
import { Select } from 'antd';
import { Tag } from 'antd';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import { ADD_BUTTON_KEY, SEARCH_PLACEHOLDER_KEY } from "../../../../model";
import DeviceIcon from "../../../../components/shared/DeviceIcon";
import LinkStatusTag from "../../../../components/shared/LinkStatusTag";
import OnlineStatus from "../../../../components/shared/OnlineStatus";
import "./index.less";
var STRUCTURE_TAG_COLOR = {
  composite: 'blue',
  component: 'purple'
};
var DeviceTable = function DeviceTable(_ref) {
  var activeKind = _ref.activeKind,
    data = _ref.data,
    loading = _ref.loading,
    search = _ref.search,
    typeFilter = _ref.typeFilter,
    structureFilter = _ref.structureFilter,
    typeOptions = _ref.typeOptions,
    structureOptions = _ref.structureOptions,
    page = _ref.page,
    pageSize = _ref.pageSize,
    getText = _ref.getText,
    onSearchChange = _ref.onSearchChange,
    onTypeFilterChange = _ref.onTypeFilterChange,
    onStructureFilterChange = _ref.onStructureFilterChange,
    onPageChange = _ref.onPageChange,
    onAdd = _ref.onAdd,
    onSortChange = _ref.onSortChange,
    onRowClick = _ref.onRowClick;
  var columns = useMemo(function () {
    var nameColumn = {
      title: getText('pisell2.saas.device-planning.column.name'),
      dataIndex: 'name',
      key: 'name',
      render: function render(name, record) {
        var _record$_raw$type;
        return /*#__PURE__*/React.createElement("span", {
          className: "saas-device-planning-device-table__device-name"
        }, (_record$_raw$type = record._raw.type) !== null && _record$_raw$type !== void 0 && _record$_raw$type.icon ? /*#__PURE__*/React.createElement(DeviceIcon, {
          className: "saas-device-planning-device-table__device-icon",
          icon: record._raw.type.icon,
          kind: record._raw.type_kind
        }) : null, name);
      }
    };
    var typeColumn = {
      title: getText('pisell2.saas.device-planning.column.device-type'),
      dataIndex: 'typeName',
      key: 'typeName'
    };
    var shortNumberColumn = {
      title: getText('pisell2.saas.device-planning.device-short-number.label'),
      key: 'shortNumber',
      width: 170,
      render: function render(_value, record) {
        var _record$_raw$short_nu;
        return ((_record$_raw$short_nu = record._raw.short_number) === null || _record$_raw$short_nu === void 0 ? void 0 : _record$_raw$short_nu.trim()) || '-';
      }
    };
    var modelColumn = {
      title: getText('pisell2.saas.device-planning.column.device-model'),
      dataIndex: 'modelName',
      key: 'modelName'
    };
    var structureColumn = {
      title: getText('pisell2.saas.device-planning.column.structure'),
      dataIndex: 'structure',
      key: 'structure',
      width: 120,
      render: function render(value) {
        return value ? /*#__PURE__*/React.createElement(Tag, {
          color: STRUCTURE_TAG_COLOR[value]
        }, getText("pisell2.saas.device-planning.structure.".concat(value))) : '-';
      }
    };
    if (activeKind === 'dumb' || activeKind === 'integrated') {
      return [nameColumn, typeColumn, modelColumn];
    }
    return [nameColumn, shortNumberColumn, typeColumn, modelColumn, structureColumn, {
      title: getText('pisell2.saas.device-planning.column.profile'),
      dataIndex: 'profileName',
      key: 'profileName'
    }, {
      title: getText('pisell2.saas.device-planning.column.link-status'),
      dataIndex: 'link',
      key: 'link',
      width: 140,
      render: function render(value) {
        return /*#__PURE__*/React.createElement(LinkStatusTag, {
          value: value,
          getText: getText
        });
      }
    }, {
      title: getText('pisell2.saas.device-planning.column.online-status'),
      dataIndex: 'status',
      key: 'status',
      width: 140,
      render: function render(value) {
        return /*#__PURE__*/React.createElement(OnlineStatus, {
          value: value,
          getText: getText,
          className: "saas-device-planning-device-table__online-status",
          dotClassName: "saas-device-planning-device-table__status-dot"
        });
      }
    }];
  }, [activeKind, getText]);
  var pagedData = useMemo(function () {
    var start = (page - 1) * pageSize;
    return data.slice(start, start + pageSize);
  }, [data, page, pageSize]);
  var handleSortChange = function handleSortChange(detail) {
    var sortedPageData = (detail === null || detail === void 0 ? void 0 : detail.dataSource) || [];
    var start = (page - 1) * pageSize;
    var nextData = _toConsumableArray(data);
    nextData.splice.apply(nextData, [start, sortedPageData.length].concat(_toConsumableArray(sortedPageData)));
    onSortChange(nextData);
    return false;
  };
  var emptyContent = /*#__PURE__*/React.createElement("div", {
    className: "saas-device-planning-device-table__empty"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "SettingOutlined"
  }), /*#__PURE__*/React.createElement("div", {
    className: "saas-device-planning-device-table__empty-title"
  }, getText("pisell2.saas.device-planning.empty.".concat(activeKind, ".title"))), /*#__PURE__*/React.createElement("div", {
    className: "saas-device-planning-device-table__empty-desc"
  }, getText("pisell2.saas.device-planning.empty.".concat(activeKind, ".desc"))), /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
    className: "saas-device-planning-device-table__empty-button",
    onClick: onAdd
  }, getText(ADD_BUTTON_KEY[activeKind])));
  return /*#__PURE__*/React.createElement("div", {
    className: "saas-device-planning-device-table"
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-device-planning-device-table__toolbar"
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-device-planning-device-table__filters"
  }, /*#__PURE__*/React.createElement(Input, {
    allowClear: true,
    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
    value: search,
    placeholder: getText(SEARCH_PLACEHOLDER_KEY[activeKind]),
    onChange: function onChange(event) {
      return onSearchChange(event.target.value);
    },
    style: {
      width: 260
    }
  }), /*#__PURE__*/React.createElement(Select, {
    allowClear: true,
    value: typeFilter,
    placeholder: getText('pisell2.saas.device-planning.all-types'),
    options: typeOptions,
    onChange: function onChange(value) {
      return onTypeFilterChange(value);
    },
    style: {
      width: 200
    }
  }), activeKind === 'smart' ? /*#__PURE__*/React.createElement(Select, {
    allowClear: true,
    value: structureFilter,
    placeholder: getText('pisell2.saas.device-planning.all-structures'),
    options: structureOptions.map(function (option) {
      return {
        label: getText(option.labelKey),
        value: option.value
      };
    }),
    onChange: function onChange(value) {
      return onStructureFilterChange(value);
    },
    style: {
      width: 160
    }
  }) : null), /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
    className: "saas-device-planning-device-table__add-button",
    onClick: onAdd
  }, getText(ADD_BUTTON_KEY[activeKind]))), /*#__PURE__*/React.createElement("div", {
    className: "saas-device-planning-device-table__table"
  }, /*#__PURE__*/React.createElement(Table, {
    key: activeKind,
    rowKey: "id",
    dataSource: pagedData,
    columns: columns,
    rowClassName: "saas-device-planning-device-table__row",
    loading: loading,
    dragSort: data.length > 1,
    virtual: false,
    onSortChange: handleSortChange,
    onRow: function onRow(record) {
      return {
        onClick: function onClick() {
          return onRowClick(record);
        }
      };
    },
    scroll: {
      autoCalc: true,
      scrollToFirstRowOnChange: true
    },
    pagination: {
      localPagination: false,
      current: page,
      pageSize: pageSize,
      total: data.length,
      showSizeChanger: true,
      showPagination: true,
      onChange: function onChange(value) {
        var nextPageSize = value.size || pageSize;
        onPageChange(nextPageSize !== pageSize ? 1 : value.page || 1, nextPageSize);
      }
    },
    showTitle: false,
    showSubTitle: false,
    locale: {
      emptyText: emptyContent
    },
    bordered: false
  })));
};
export default DeviceTable;