import React from 'react';
import { Button } from 'antd';
import { Icon } from '@pisell/materials';
import classNames from 'classnames';
var DrawerSidebar = function DrawerSidebar(_ref) {
  var activeKey = _ref.activeKey,
    activeKind = _ref.activeKind,
    getText = _ref.getText,
    onChange = _ref.onChange;
  var items = [{
    key: 'info',
    icon: 'InfoCircleOutlined',
    label: getText('pisell2.saas.device-planning.drawer.info')
  }];
  if (activeKind !== 'integrated') {
    items.push({
      key: 'connections',
      icon: 'ApiOutlined',
      label: getText('pisell2.saas.device-planning.drawer.connections')
    });
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__sidebar"
  }, items.map(function (item) {
    return /*#__PURE__*/React.createElement(Button, {
      key: item.key,
      type: "text",
      className: classNames('device-detail-drawer__sidebar-item', {
        'is-active': activeKey === item.key
      }),
      onClick: function onClick() {
        return onChange(item.key);
      }
    }, /*#__PURE__*/React.createElement(Icon, {
      type: item.icon
    }), /*#__PURE__*/React.createElement("span", null, item.label));
  }));
};
export default DrawerSidebar;