import React from 'react';
import { IconAgriculture, IconAnchor, IconBrightnessAuto, IconRemove } from '@defencedigital/icon-library';
import styled from 'styled-components';
import { Autocomplete, AutocompleteOption } from './index';
export default {
  component: Autocomplete,
  title: 'Autocomplete',
  parameters: {
    actions: {
      argTypesRegex: '^on.*'
    }
  },
  args: {
    label: 'Some label'
  }
};
var StyledWrapper = styled.div.withConfig({
  displayName: "Autocompletestories__StyledWrapper",
  componentId: "sc-1wuk6sd-0"
})(["height:", ";max-width:20rem;"], function (_ref) {
  var $isDisabled = _ref.$isDisabled;
  return $isDisabled ? 'initial' : '18rem';
});
var Template = function Template(args) {
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    $isDisabled: args.isDisabled
  }, /*#__PURE__*/React.createElement(Autocomplete, args, /*#__PURE__*/React.createElement(AutocompleteOption, {
    value: "one"
  }, "One"), /*#__PURE__*/React.createElement(AutocompleteOption, {
    value: "two"
  }, "Two"), /*#__PURE__*/React.createElement(AutocompleteOption, {
    value: "three"
  }, "Three"), /*#__PURE__*/React.createElement(AutocompleteOption, {
    value: "long"
  }, "This is a really, really long select option label that overflows the container when selected")));
};
var TemplateWithIconsAndBadges = function TemplateWithIconsAndBadges(args) {
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    $isDisabled: args.isDisabled
  }, /*#__PURE__*/React.createElement(Autocomplete, args, /*#__PURE__*/React.createElement(AutocompleteOption, {
    badge: 100,
    icon: /*#__PURE__*/React.createElement(IconAnchor, null),
    value: "one"
  }, "One"), /*#__PURE__*/React.createElement(AutocompleteOption, {
    badge: 110,
    icon: /*#__PURE__*/React.createElement(IconRemove, null),
    value: "two"
  }, "Two"), /*#__PURE__*/React.createElement(AutocompleteOption, {
    badge: 111,
    icon: /*#__PURE__*/React.createElement(IconAgriculture, null),
    value: "three"
  }, "Three"), /*#__PURE__*/React.createElement(AutocompleteOption, {
    badge: 112,
    icon: /*#__PURE__*/React.createElement(IconBrightnessAuto, null),
    value: "four"
  }, "Four")));
};
export var Default = Template.bind({});
export var Disabled = Template.bind({});
Disabled.args = {
  isDisabled: true
};
export var NoClearButton = Template.bind({});
NoClearButton.args = {
  hideClearButton: true,
  initialValue: 'two'
};
export var Open = Template.bind({});
Open.storyName = 'Open';
Open.args = {
  initialIsOpen: true
};
export var WithError = Template.bind({});
WithError.args = {
  isInvalid: true
};
export var WithValue = Template.bind({});
WithValue.args = {
  initialValue: 'two'
};
export var WithIconsAndBadges = TemplateWithIconsAndBadges.bind({});