import "core-js/modules/es6.function.name";

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';
import { uniqueId } from 'lodash';
import { Icon, List, ListItem, ListItemHeader, ListItemSection } from "../..";

var DeviceListCall =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(DeviceListCall, _React$PureComponent);

  function DeviceListCall() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.state = {
      selectedIndex: _this.props.defaultSelected,
      id: _this.props.id || uniqueId('cui-device-list-call-')
    };

    _this.handleSelect = function (e, value, index) {
      var _this$props = _this.props,
          onSelect = _this$props.onSelect,
          devices = _this$props.devices;
      var currentIndex = devices.length < index - 1 ? 0 : index - 1;
      e.preventDefault();
      return _this.setState({
        selectedIndex: currentIndex
      }, function () {
        return onSelect && onSelect(e, currentIndex, value);
      });
    };

    return _this;
  }

  var _proto = DeviceListCall.prototype;

  _proto.render = function render() {
    var _this$props2 = this.props,
        className = _this$props2.className,
        header = _this$props2.header,
        devices = _this$props2.devices;
    var _this$state = this.state,
        selectedIndex = _this$state.selectedIndex,
        id = _this$state.id;

    var getLeftSection = function getLeftSection(deviceType) {
      switch (deviceType) {
        case 'device':
          return React.createElement(Icon, {
            name: "spark-board_20"
          });

        default:
          return React.createElement(Icon, {
            name: "laptop_20"
          });
      }
    };

    var getRightSection = function getRightSection(device, idx) {
      if (idx === selectedIndex) {
        return React.createElement(Icon, {
          name: "check_20",
          color: "blue"
        });
      }
    };

    return React.createElement(List, {
      className: className,
      onSelect: this.handleSelect,
      active: selectedIndex
    }, React.createElement(ListItemHeader, {
      header: header
    }), devices.map(function (ele, idx) {
      return React.createElement(ListItem, {
        key: "device-" + idx,
        id: id,
        value: ele,
        label: ele.name,
        title: ele.title || ele.name
      }, React.createElement(ListItemSection, {
        position: "left"
      }, getLeftSection(ele.type)), React.createElement(ListItemSection, {
        position: "center"
      }, React.createElement("div", {
        className: "cui-list-item__header"
      }, ele.name)), React.createElement(ListItemSection, {
        position: "right"
      }, getRightSection(ele, idx)));
    }));
  };

  return DeviceListCall;
}(React.PureComponent);

DeviceListCall.displayName = 'DeviceListCall';
DeviceListCall.defaultProps = {
  className: '',
  defaultSelected: 0,
  id: null,
  onSelect: null
};
DeviceListCall.propTypes = {
  /** Default Index Value selected */
  defaultSelected: PropTypes.number,

  /** required list of devices to show in list */
  devices: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string.isRequired,
    value: PropTypes.string,
    type: PropTypes.oneOf(['', 'device']),
    title: PropTypes.string
  })).isRequired,

  /** HTML Class for associated input */
  className: PropTypes.string,

  /** ListItem header */
  header: PropTypes.string.isRequired,

  /** HTML ID for associated input */
  id: PropTypes.string,

  /** optional function called when list item is selected */
  onSelect: PropTypes.func
};
export default DeviceListCall;