"use strict";

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); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
var _ControlsListItem = _interopRequireDefault(require("./ControlsListItem"));
var _ControlsListItemSelectButton = _interopRequireDefault(require("./ControlsListItemSelectButton"));
var _ControlsListItemSelectListItem = _interopRequireDefault(require("./ControlsListItemSelectListItem"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var GRID = {
  areas: [['icon', 'label', 'button'], ['.', 'description', 'description']],
  templateColumns: ['auto', '1fr', '1fr'],
  templateRows: ['auto', '1fr'],
  gutter: {
    row: 1,
    col: 2
  }
};
var StyledDiv = _styledComponents.default.div.withConfig({
  displayName: "ControlsListItemSelect__StyledDiv",
  componentId: "sc-rold7z-0"
})(["li + li{border-top:none;}"]);
var ControlsListItemSelect = function ControlsListItemSelect(_ref) {
  var label = _ref.label,
    Icon = _ref.Icon,
    options = _ref.options,
    onChange = _ref.onChange,
    selectedItem = _ref.selectedItem,
    description = _ref.description,
    asAddon = _ref.asAddon,
    showCheckmark = _ref.showCheckmark,
    justifyContent = _ref.justifyContent,
    listWidth = _ref.listWidth,
    disabled = _ref.disabled,
    placement = _ref.placement;
  var customComponents = (0, _react.useMemo)(function () {
    return {
      SelectedValue: function SelectedValue() {
        var _selectedItem$;
        return (0, _ControlsListItemSelectButton.default)(selectedItem === null || selectedItem === void 0 || (_selectedItem$ = selectedItem[0]) === null || _selectedItem$ === void 0 ? void 0 : _selectedItem$.label);
      },
      ListItem: function ListItem(_ref2) {
        var index = _ref2.index;
        return (0, _ControlsListItemSelectListItem.default)({
          index: index,
          selectedItem: selectedItem,
          showCheckmark: showCheckmark,
          justifyContent: justifyContent
        });
      }
    };
  }, [selectedItem, showCheckmark, justifyContent]);
  if (asAddon) {
    return _react.default.createElement(_.Flexbox, {
      container: true,
      justifyContent: "space-between",
      alignItems: "center"
    }, _react.default.createElement(_.Typography, {
      type: "secondary",
      color: function color(t) {
        return t.color.label;
      }
    }, label), _react.default.createElement(StyledDiv, null, _react.default.createElement(_.Input.Select, {
      id: "control-list-item-select",
      label: label,
      components: customComponents,
      onChange: onChange,
      options: options,
      listPosition: "left",
      fullWidth: true,
      hideLabel: true,
      noFormField: true,
      listWidth: listWidth,
      disabled: disabled,
      preventScroll: true,
      placement: placement
    })));
  }
  return _react.default.createElement(_ControlsListItem.default, {
    cursor: "default",
    disabled: disabled
  }, _react.default.createElement(_.CssGrid.Container, GRID, _react.default.createElement(_.CssGrid.Item, {
    area: "icon",
    justify: "start",
    align: "center"
  }, _react.default.createElement(_react.default.Fragment, null, Icon)), _react.default.createElement(_.CssGrid.Item, {
    area: "label",
    justify: "start",
    align: "center"
  }, _react.default.createElement(_.Typography, {
    type: "secondary",
    weight: "bold"
  }, label)), _react.default.createElement(_.CssGrid.Item, {
    area: "button",
    justify: "end",
    align: "center"
  }, _react.default.createElement(StyledDiv, null, _react.default.createElement(_.Input.Select, {
    id: "control-list-item-select",
    label: label,
    components: customComponents,
    onChange: onChange,
    options: options,
    listPosition: "left",
    fullWidth: true,
    hideLabel: true,
    noFormField: true,
    listWidth: listWidth,
    disabled: disabled,
    preventScroll: true,
    placement: placement
  }))), _react.default.createElement(_.CssGrid.Item, {
    area: "description"
  }, description && _react.default.createElement(_.Typography, {
    type: "secondary",
    color: function color(t) {
      return t.color.label;
    }
  }, description))));
};
var _default = exports.default = ControlsListItemSelect;