import React, { useMemo } from 'react';
import styled from 'styled-components';
import { Flexbox, Input, CssGrid as Grid, Typography } from '../..';
import ControlsListItem from './ControlsListItem';
import ControlsListItemSelectButton from './ControlsListItemSelectButton';
import ControlsListItemSelectListItem from './ControlsListItemSelectListItem';
var GRID = {
  areas: [['icon', 'label', 'button'], ['.', 'description', 'description']],
  templateColumns: ['auto', '1fr', '1fr'],
  templateRows: ['auto', '1fr'],
  gutter: {
    row: 1,
    col: 2
  }
};
var StyledDiv = styled.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 = useMemo(function () {
    return {
      SelectedValue: function SelectedValue() {
        var _selectedItem$;
        return ControlsListItemSelectButton(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 ControlsListItemSelectListItem({
          index: index,
          selectedItem: selectedItem,
          showCheckmark: showCheckmark,
          justifyContent: justifyContent
        });
      }
    };
  }, [selectedItem, showCheckmark, justifyContent]);
  if (asAddon) {
    return React.createElement(Flexbox, {
      container: true,
      justifyContent: "space-between",
      alignItems: "center"
    }, React.createElement(Typography, {
      type: "secondary",
      color: function color(t) {
        return t.color.label;
      }
    }, label), React.createElement(StyledDiv, null, React.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.createElement(ControlsListItem, {
    cursor: "default",
    disabled: disabled
  }, React.createElement(Grid.Container, GRID, React.createElement(Grid.Item, {
    area: "icon",
    justify: "start",
    align: "center"
  }, React.createElement(React.Fragment, null, Icon)), React.createElement(Grid.Item, {
    area: "label",
    justify: "start",
    align: "center"
  }, React.createElement(Typography, {
    type: "secondary",
    weight: "bold"
  }, label)), React.createElement(Grid.Item, {
    area: "button",
    justify: "end",
    align: "center"
  }, React.createElement(StyledDiv, null, React.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.createElement(Grid.Item, {
    area: "description"
  }, description && React.createElement(Typography, {
    type: "secondary",
    color: function color(t) {
      return t.color.label;
    }
  }, description))));
};
export default ControlsListItemSelect;