'use strict';

var _createClass = require('@babel/runtime/helpers/createClass');
var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
var _inherits = require('@babel/runtime/helpers/inherits');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
require('core-js/modules/es.symbol.js');
require('core-js/modules/es.symbol.description.js');
require('core-js/modules/es.array.concat.js');
require('core-js/modules/es.array.join.js');
require('core-js/modules/es.array.map.js');
require('core-js/modules/es.reflect.construct.js');
var React = require('react');
var PropTypes = require('prop-types');
var Settings = require('../../constants/Settings.js');
var Button = require('../Button/Button.js');
var componentUtilityFunctions = require('../../utils/componentUtilityFunctions.js');
var KeyCodeConstants = require('../../constants/KeyCodeConstants.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var _createClass__default = /*#__PURE__*/_interopDefault(_createClass);
var _classCallCheck__default = /*#__PURE__*/_interopDefault(_classCallCheck);
var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefault(_possibleConstructorReturn);
var _getPrototypeOf__default = /*#__PURE__*/_interopDefault(_getPrototypeOf);
var _inherits__default = /*#__PURE__*/_interopDefault(_inherits);
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);

function _callSuper(t, o, e) { return o = _getPrototypeOf__default.default(o), _possibleConstructorReturn__default.default(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf__default.default(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var prefix = Settings.settings.prefix,
  iotPrefix = Settings.settings.iotPrefix;
var ResourceList = /*#__PURE__*/function (_Component) {
  function ResourceList(props) {
    var _this;
    _classCallCheck__default.default(this, ResourceList);
    _this = _callSuper(this, ResourceList, [props]);
    _defineProperty__default.default(_this, "render", function () {
      var _this$props = _this.props,
        design = _this$props.design,
        data = _this$props.data,
        customAction = _this$props.customAction,
        currentItemId = _this$props.currentItemId,
        onRowClick = _this$props.onRowClick,
        extraContent = _this$props.extraContent,
        testId = _this$props.testId;
      var checkboxCell = /*#__PURE__*/React__default.default.createElement("div", {
        className: "".concat(prefix, "--structured-list-td"),
        style: {
          verticalAlign: 'middle'
        }
      }, /*#__PURE__*/React__default.default.createElement("svg", {
        className: "".concat(prefix, "--structured-list-svg"),
        width: "16",
        height: "16",
        viewBox: "0 0 16 16"
      }, /*#__PURE__*/React__default.default.createElement("path", {
        d: "M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z",
        fillRule: "evenodd"
      })));
      var CustomActionContent = function CustomActionContent(_ref) {
        var rowId = _ref.rowId;
        return /*#__PURE__*/React__default.default.createElement("div", {
          className: "".concat(prefix, "--structured-list-td ").concat(prefix, "--structured-list-content--nowrap"),
          role: "presentation"
        }, /*#__PURE__*/React__default.default.createElement(Button, {
          kind: "ghost",
          renderIcon: customAction.icon,
          onClick: function onClick() {
            return customAction.onClick(rowId);
          },
          testId: "".concat(testId, "-custom-action-").concat(rowId)
        }, customAction.label));
      };
      var listContent = data.map(function (_ref2, idx) {
        var id = _ref2.id,
          title = _ref2.title,
          description = _ref2.description;
        var activeItem = id === currentItemId;
        return (
          /*#__PURE__*/
          // eslint-disable-next-line jsx-a11y/label-has-for, jsx-a11y/label-has-associated-control, jsx-a11y/no-noninteractive-element-interactions
          React__default.default.createElement("label", {
            key: id,
            "aria-label": title,
            className: "".concat(activeItem ? "".concat(prefix, "--structured-list-row--selected") : '', " ").concat(prefix, "--structured-list-row"),
            tabIndex: customAction ? -1 : idx,
            onClick: onRowClick ? function () {
              return onRowClick(id);
            } : null,
            onKeyDown: onRowClick ? componentUtilityFunctions.handleSpecificKeyDown([KeyCodeConstants.keyboardKeys.ENTER], function () {
              return onRowClick(id);
            }) : undefined,
            "data-testid": "".concat(testId, "-row-").concat(id)
          }, extraContent ? /*#__PURE__*/React__default.default.createElement("div", {
            className: "".concat(prefix, "--structured-list-td")
          }, extraContent[idx]) : undefined, design === 'inline' ? /*#__PURE__*/React__default.default.createElement(React.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
            className: "".concat(prefix, "--structured-list-td")
          }, /*#__PURE__*/React__default.default.createElement("strong", null, title), /*#__PURE__*/React__default.default.createElement("div", {
            className: "".concat(iotPrefix, "--resource-list__inline-div ").concat(prefix, "--structured-list-td")
          }, description))) : /*#__PURE__*/React__default.default.createElement(React.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
            className: "".concat(prefix, "--structured-list-td ").concat(prefix, "--structured-list-content--nowrap")
          }, /*#__PURE__*/React__default.default.createElement("strong", null, title)), /*#__PURE__*/React__default.default.createElement("div", {
            className: "".concat(prefix, "--structured-list-td")
          }, description)), customAction ? /*#__PURE__*/React__default.default.createElement(CustomActionContent, {
            rowId: id
          }) : /*#__PURE__*/React__default.default.createElement(React.Fragment, null, /*#__PURE__*/React__default.default.createElement("input", {
            tabIndex: -1,
            className: "".concat(prefix, "--structured-list-input"),
            value: title,
            type: "radio",
            title: title,
            checked: activeItem,
            readOnly: true
          }), checkboxCell))
        );
      });
      return /*#__PURE__*/React__default.default.createElement("section", {
        "data-testid": testId,
        className: ["".concat(iotPrefix, "--resource-list"), "".concat(prefix, "--structured-list"), "".concat(prefix, "--structured-list--border"), "".concat(prefix, "--structured-list--selection")].join(' ')
      }, /*#__PURE__*/React__default.default.createElement("div", {
        className: "".concat(prefix, "--structured-list-tbody")
      }, listContent));
    });
    _this.state = {};
    return _this;
  }
  _inherits__default.default(ResourceList, _Component);
  return _createClass__default.default(ResourceList);
}(React.Component);
_defineProperty__default.default(ResourceList, "propTypes", {
  /** Component row design */
  design: PropTypes__default.default.oneOf(['normal', 'inline']),
  /** Array of data - table content */
  data: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
    id: PropTypes__default.default.string.isRequired,
    title: PropTypes__default.default.string.isRequired,
    description: PropTypes__default.default.string.isRequired
  })).isRequired,
  /** Callback for when row is clicked */
  onRowClick: PropTypes__default.default.func,
  /** Object for custom action column */
  customAction: PropTypes__default.default.shape({
    onClick: PropTypes__default.default.func.isRequired,
    label: PropTypes__default.default.string.isRequired,
    icon: PropTypes__default.default.oneOfType([PropTypes__default.default.func, PropTypes__default.default.object])
  }),
  /** Current item selected id */
  currentItemId: PropTypes__default.default.string,
  /** Extra content element */
  extraContent: PropTypes__default.default.arrayOf(PropTypes__default.default.node),
  testId: PropTypes__default.default.string
});
_defineProperty__default.default(ResourceList, "defaultProps", {
  design: 'normal',
  onRowClick: function onRowClick() {},
  currentItemId: null,
  extraContent: null,
  customAction: null,
  testId: 'resource-list'
});
ResourceList.displayName = 'ResourceList';
ResourceList.__docgenInfo = {
  "description": "",
  "methods": [{
    "name": "render",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }],
  "displayName": "ResourceList",
  "props": {
    "design": {
      "defaultValue": {
        "value": "'normal'",
        "computed": false
      },
      "description": "Component row design",
      "type": {
        "name": "enum",
        "value": [{
          "value": "'normal'",
          "computed": false
        }, {
          "value": "'inline'",
          "computed": false
        }]
      },
      "required": false
    },
    "onRowClick": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "description": "Callback for when row is clicked",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "currentItemId": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Current item selected id",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "extraContent": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Extra content element",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "node"
        }
      },
      "required": false
    },
    "customAction": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Object for custom action column",
      "type": {
        "name": "shape",
        "value": {
          "onClick": {
            "name": "func",
            "required": true
          },
          "label": {
            "name": "string",
            "required": true
          },
          "icon": {
            "name": "union",
            "value": [{
              "name": "func"
            }, {
              "name": "object"
            }],
            "required": false
          }
        }
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'resource-list'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "data": {
      "description": "Array of data - table content",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "id": {
              "name": "string",
              "required": true
            },
            "title": {
              "name": "string",
              "required": true
            },
            "description": {
              "name": "string",
              "required": true
            }
          }
        }
      },
      "required": true
    }
  }
};
var ResourceList$1 = ResourceList;

module.exports = ResourceList$1;
