function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { useMemo } from 'react';
import { Card, Empty } from 'antd';
import { Icon } from '@pisell/materials';
import classNames from 'classnames';
import LinkStatusTag from "../../../components/shared/LinkStatusTag";
import OnlineStatus from "../../../components/shared/OnlineStatus";
import "./DeviceInfoPanel.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 DeviceInfoPanel = function DeviceInfoPanel(_ref) {
  var _device$short_number;
  var record = _ref.record,
    getText = _ref.getText;
  var device = record._raw;
  var showAdvancedInfo = device.type_kind === 'smart';
  var showStatusInfo = device.type_kind === 'smart' || device.type_kind === 'dumb';
  var shortNumber = ((_device$short_number = device.short_number) === null || _device$short_number === void 0 ? void 0 : _device$short_number.trim()) || EMPTY_VALUE;
  var lastSeen = formatLastSeen(device.last_seen);
  var reportGroups = useMemo(function () {
    if (!isPlainObject(device.data)) return [];
    return REPORT_GROUPS.reduce(function (list, group) {
      var _device$data;
      var data = (_device$data = device.data) === null || _device$data === void 0 ? void 0 : _device$data[group.key];
      if (isPlainObject(data)) {
        list.push(_objectSpread(_objectSpread({}, group), {}, {
          data: data
        }));
      }
      return list;
    }, []);
  }, [device.data]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card, {
    size: "small",
    title: getText('pisell2.saas.device-planning.detail.basic-info'),
    className: "device-detail-drawer__card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__info-list"
  }, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__info-row"
  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.detail.name')), /*#__PURE__*/React.createElement("strong", null, record.name)), showAdvancedInfo ? /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__info-row"
  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.device-short-number.label')), /*#__PURE__*/React.createElement("strong", null, shortNumber)) : null, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__info-row"
  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.detail.type')), /*#__PURE__*/React.createElement("strong", null, record.typeName)), /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__info-row"
  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.detail.model')), /*#__PURE__*/React.createElement("strong", null, record.modelName)), showAdvancedInfo ? /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__info-two-row"
  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.detail.profile')), /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__profile-card"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "FileTextOutlined"
  }), record.profileName)) : null)), showStatusInfo ? /*#__PURE__*/React.createElement(Card, {
    size: "small",
    title: getText('pisell2.saas.device-planning.detail.status'),
    className: "device-detail-drawer__card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__info-list"
  }, showAdvancedInfo ? /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__info-row"
  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.detail.link-status')), /*#__PURE__*/React.createElement(LinkStatusTag, {
    value: record.link,
    getText: getText,
    style: {
      marginRight: 0
    }
  })) : null, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__info-row"
  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.device-planning.detail.online-status')), /*#__PURE__*/React.createElement(OnlineStatus, {
    value: record.status,
    getText: getText,
    className: "device-detail-drawer__online-status",
    dotClassName: "device-detail-drawer__status-dot"
  })))) : null, showAdvancedInfo ? /*#__PURE__*/React.createElement(Card, {
    size: "small",
    title: getText('pisell2.saas.device-planning.detail.report-info'),
    extra: /*#__PURE__*/React.createElement("span", {
      className: "device-detail-drawer__last-seen"
    }, getText('pisell2.saas.device-planning.detail.last-seen'), lastSeen),
    className: "device-detail-drawer__card"
  }, reportGroups.length > 0 ? /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__report-list"
  }, reportGroups.map(function (group) {
    return /*#__PURE__*/React.createElement(Card, {
      key: group.key,
      size: "small",
      type: "inner",
      title: getReportText(getText, "group.".concat(group.key)),
      className: "device-detail-drawer__report-card"
    }, /*#__PURE__*/React.createElement("div", {
      className: "device-detail-drawer__report-rows"
    }, group.fields.map(function (field) {
      return /*#__PURE__*/React.createElement("div", {
        key: field.key,
        className: "device-detail-drawer__report-row"
      }, /*#__PURE__*/React.createElement("span", {
        className: "device-detail-drawer__report-label"
      }, getReportText(getText, "field.".concat(field.key))), /*#__PURE__*/React.createElement("span", {
        className: "device-detail-drawer__report-value"
      }, field.value ? field.value(group.data, getText) : formatReportValue(group.data[field.key], getText)));
    })));
  })) : /*#__PURE__*/React.createElement(Empty, {
    image: Empty.PRESENTED_IMAGE_SIMPLE,
    description: getText('pisell2.saas.device-planning.detail.no-report-info')
  })) : null);
};
export default DeviceInfoPanel;