import React from 'react';
import { Drawer } from 'antd';
import { Button, Icon } from '@pisell/materials';
import { CloseOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import { DEVICE_ICON_COLOR } from "../../utils";
import DrawerSidebar from "./components/DrawerSidebar";
import DeviceInfoPanel from "./components/DeviceInfoPanel";
import DeviceConnectionsPanel from "./components/DeviceConnectionsPanel";
import { useDeviceConnections } from "./hooks/useDeviceConnections";
import { useDeviceDetail } from "./hooks/useDeviceDetail";
import "./index.less";
var EMPTY_VALUE = '-';
var BYTE_PER_GB = 1024 * 1024 * 1024;
var REPORT_GROUPS = [{
  key: 'software',
  fields: [{
    key: 'name'
  }, {
    key: 'version'
  }]
}, {
  key: 'battery',
  fields: [{
    key: 'level',
    value: function value(data, getText) {
      return renderBatteryValue(data, getText);
    }
  }]
}, {
  key: 'network',
  fields: [{
    key: 'type'
  }, {
    key: 'local_ip'
  }, {
    key: 'gateway'
  }, {
    key: 'subnet_mask'
  }, {
    key: 'ssid'
  }]
}, {
  key: 'hardware',
  fields: [{
    key: 'model'
  }, {
    key: 'os_version'
  }]
}, {
  key: 'storage',
  fields: [{
    key: 'used',
    value: function value(data) {
      return formatStorageValue(data.used);
    }
  }, {
    key: 'total',
    value: function value(data) {
      return formatStorageValue(data.total);
    }
  }]
}];
var isPlainObject = function isPlainObject(value) {
  return Object.prototype.toString.call(value) === '[object Object]';
};
var getReportText = function getReportText(getText, key) {
  return getText("pisell2.saas.device-planning.detail.report.".concat(key));
};
var formatReportValue = function formatReportValue(value, getText) {
  if (value === null || value === undefined || value === '') {
    return EMPTY_VALUE;
  }
  if (typeof value === 'boolean') {
    return getText("pisell2.saas.device-planning.detail.".concat(value ? 'yes' : 'no'));
  }
  if (Array.isArray(value) || isPlainObject(value)) {
    return /*#__PURE__*/React.createElement("span", {
      className: "device-detail-drawer__json-value"
    }, JSON.stringify(value));
  }
  return String(value);
};
var formatStorageValue = function formatStorageValue(value) {
  var byteValue = typeof value === 'number' || typeof value === 'string' ? Number(value) : Number.NaN;
  if (!Number.isFinite(byteValue)) {
    return EMPTY_VALUE;
  }
  var gbValue = byteValue / BYTE_PER_GB;
  var text = gbValue >= 10 ? String(Math.round(gbValue)) : gbValue.toFixed(2).replace(/\.?0+$/, '');
  return "".concat(text, " GB");
};
var formatLastSeen = function formatLastSeen(value) {
  return typeof value === 'string' && value.trim() ? value : EMPTY_VALUE;
};
var renderBatteryValue = function renderBatteryValue(data, getText) {
  var rawLevel = typeof data.level === 'number' || typeof data.level === 'string' ? Number(data.level) : Number.NaN;
  var hasLevel = Number.isFinite(rawLevel);
  var levelValue = hasLevel ? Math.max(0, Math.min(rawLevel, 100)) : 0;
  var level = hasLevel ? "".concat(rawLevel, "%") : EMPTY_VALUE;
  var charging = (data === null || data === void 0 ? void 0 : data.charging) === true;
  return /*#__PURE__*/React.createElement("span", {
    className: "device-detail-drawer__battery-value"
  }, /*#__PURE__*/React.createElement("span", {
    className: classNames('device-detail-drawer__battery-icon', {
      'is-charging': charging
    })
  }, /*#__PURE__*/React.createElement("span", {
    className: "device-detail-drawer__battery-fill",
    style: {
      width: "".concat(levelValue, "%")
    }
  }), charging ? /*#__PURE__*/React.createElement("span", {
    className: "device-detail-drawer__battery-bolt"
  }) : null), /*#__PURE__*/React.createElement("span", null, level), /*#__PURE__*/React.createElement("span", {
    className: "device-detail-drawer__battery-status"
  }, getReportText(getText, charging ? 'charging' : 'not-charging')));
};
var DeviceDetailDrawer = function DeviceDetailDrawer(_ref) {
  var _device$type;
  var open = _ref.open,
    record = _ref.record,
    _ref$initialTab = _ref.initialTab,
    initialTab = _ref$initialTab === void 0 ? 'info' : _ref$initialTab,
    getText = _ref.getText,
    translation = _ref.translation,
    onClose = _ref.onClose,
    onEdit = _ref.onEdit,
    onDelete = _ref.onDelete,
    onConnectionsChanged = _ref.onConnectionsChanged;
  var _useDeviceDetail = useDeviceDetail({
      open: open,
      record: record,
      initialTab: initialTab,
      translation: translation
    }),
    activeTab = _useDeviceDetail.activeTab,
    activeKind = _useDeviceDetail.activeKind,
    displayRecord = _useDeviceDetail.displayRecord,
    setActiveTab = _useDeviceDetail.setActiveTab;
  var device = displayRecord === null || displayRecord === void 0 ? void 0 : displayRecord._raw;
  var connections = useDeviceConnections({
    open: open,
    activeTab: activeTab,
    activeKind: activeKind,
    displayRecord: displayRecord,
    onConnectionsChanged: onConnectionsChanged
  });
  return /*#__PURE__*/React.createElement(Drawer, {
    open: open,
    onClose: onClose,
    width: 720,
    maskClosable: true,
    closable: false,
    className: "device-detail-drawer",
    rootClassName: "device-detail-drawer-root",
    styles: {
      body: {
        padding: 0
      }
    },
    bodyStyle: {
      padding: 0
    }
  }, displayRecord ? /*#__PURE__*/React.createElement("div", {
    className: classNames('device-detail-drawer__root', "is-".concat(activeKind))
  }, /*#__PURE__*/React.createElement(DrawerSidebar, {
    activeKey: activeTab,
    activeKind: activeKind,
    getText: getText,
    onChange: setActiveTab
  }), /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__main"
  }, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__header"
  }, device !== null && device !== void 0 && (_device$type = device.type) !== null && _device$type !== void 0 && _device$type.icon ? /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: device.type.icon,
    color: DEVICE_ICON_COLOR[activeKind]
  })) : null, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__heading"
  }, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__name"
  }, displayRecord.name), /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__type"
  }, displayRecord.typeName)), /*#__PURE__*/React.createElement(Button, {
    type: "text",
    icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
    onClick: onClose
  })), /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__content"
  }, activeTab === 'info' ? /*#__PURE__*/React.createElement(DeviceInfoPanel, {
    record: displayRecord,
    getText: getText
  }) : /*#__PURE__*/React.createElement(DeviceConnectionsPanel, {
    activeKind: activeKind,
    currentDevice: displayRecord._raw,
    connections: connections.connections,
    loading: connections.loading,
    submitting: connections.submitting,
    deleting: connections.deleting,
    getText: getText,
    translation: translation,
    onCreateConnection: connections.handleCreateConnection,
    onUpdateConnection: connections.handleUpdateConnection,
    onDeleteConnection: connections.handleDeleteConnection
  })), activeTab === 'info' ? /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__footer"
  }, /*#__PURE__*/React.createElement(Button, {
    danger: true,
    size: "large",
    onClick: onDelete
  }, getText('pisell2.saas.device-planning.detail.delete')), /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    size: "large",
    onClick: onEdit
  }, getText('pisell2.saas.device-planning.detail.edit'))) : null)) : null);
};
export default DeviceDetailDrawer;