import React from 'react';
import { IconAgriculture, IconAnchor, IconBrightnessAuto, IconRemove } from '@defencedigital/icon-library';
import styled from 'styled-components';
import { Select } from './index';
import { SelectOption } from './SelectOption';
export default {
  component: Select,
  title: 'Select',
  parameters: {
    actions: {
      argTypesRegex: '^on.*'
    },
    docs: {
      description: {
        component: 'This component wraps a popular open-source library. See comprehensive documentation [here](https://www.downshift-js.com/downshift/).'
      }
    },
    options: {
      enableShortcuts: false
    }
  },
  args: {
    label: 'Some label'
  }
};
var StyledWrapper = styled.div.withConfig({
  displayName: "Selectstories__StyledWrapper",
  componentId: "sc-booo5j-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(Select, args, /*#__PURE__*/React.createElement(SelectOption, {
    value: "one"
  }, "A"), /*#__PURE__*/React.createElement(SelectOption, {
    value: "two"
  }, "B"), /*#__PURE__*/React.createElement(SelectOption, {
    value: "long"
  }, "This is a really, really long select option label that overflows the container when selected"), /*#__PURE__*/React.createElement(SelectOption, {
    value: "three",
    isDisabled: true
  }, "Three (disabled)")));
};
var TemplateWithIconsAndBadges = function TemplateWithIconsAndBadges(args) {
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    $isDisabled: args.isDisabled
  }, /*#__PURE__*/React.createElement(Select, args, /*#__PURE__*/React.createElement(SelectOption, {
    badge: 100,
    icon: /*#__PURE__*/React.createElement(IconAnchor, null),
    value: "one"
  }, "One"), /*#__PURE__*/React.createElement(SelectOption, {
    badge: 110,
    icon: /*#__PURE__*/React.createElement(IconRemove, null),
    value: "two"
  }, "Two"), /*#__PURE__*/React.createElement(SelectOption, {
    badge: 111,
    icon: /*#__PURE__*/React.createElement(IconAgriculture, null),
    value: "three"
  }, "Three"), /*#__PURE__*/React.createElement(SelectOption, {
    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({});