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 "../../../../shared";
import DrawerSidebar from "../DrawerSidebar";
import DeviceInfoPanel from "../DeviceInfoPanel";
import { DeviceConnectionsPanel, useDeviceConnections } from "../../../deviceConnections";
import { useDeviceDetail } from "../../hooks/useDeviceDetail";
import "./index.less";
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,
    _ref$readonly = _ref.readonly,
    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
    getText = _ref.getText,
    translation = _ref.translation,
    onClose = _ref.onClose,
    onEdit = _ref.onEdit,
    onDelete = _ref.onDelete,
    onEditDevice = _ref.onEditDevice,
    onDeleteDevice = _ref.onDeleteDevice,
    onConnectionsChanged = _ref.onConnectionsChanged,
    connectionsRefreshKey = _ref.connectionsRefreshKey,
    deletingDevice = _ref.deletingDevice;
  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 isBuildInsTab = activeTab === 'buildIns';
  var isComponentDevice = (displayRecord === null || displayRecord === void 0 ? void 0 : displayRecord._raw.structure) === 'component';
  var connectionType = isBuildInsTab || isComponentDevice ? 'component' : 'dumb';
  var connections = useDeviceConnections({
    open: open,
    activeTab: activeTab,
    activeKind: activeKind,
    connectionType: connectionType,
    displayRecord: displayRecord,
    refreshKey: connectionsRefreshKey,
    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,
    showBuildIns: (displayRecord === null || displayRecord === void 0 ? void 0 : displayRecord._raw.structure) === 'composite',
    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",
    style: {
      padding: activeTab === 'info' ? '16px' : '0'
    }
  }, activeTab === 'info' ? /*#__PURE__*/React.createElement(DeviceInfoPanel, {
    record: displayRecord,
    getText: getText,
    translation: translation
  }) : /*#__PURE__*/React.createElement(DeviceConnectionsPanel, {
    activeKind: activeKind,
    connectionType: connectionType,
    isBuildIns: isBuildInsTab,
    readonly: readonly,
    hideConnectButton: isComponentDevice || readonly,
    currentDevice: displayRecord._raw,
    connections: connections.connections,
    loading: connections.loading,
    submitting: connections.submitting,
    deleting: connections.deleting,
    deletingDevice: deletingDevice,
    getText: getText,
    translation: translation,
    onCreateConnection: connections.handleCreateConnection,
    onUpdateConnection: connections.handleUpdateConnection,
    onDeleteConnection: connections.handleDeleteConnection,
    onEditDevice: onEditDevice,
    onDeleteDevice: onDeleteDevice
  })), activeTab === 'info' && !readonly ? /*#__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;