function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import Autocomplete from './Autocomplete';
import TextField from '../TextField/TextField';
import { Title, Subtitle, Description, ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs';
export default {
  title: 'Components/Autocomplete',
  component: Autocomplete,
  argTypes: {
    clearInputText: {
      control: {
        type: 'text'
      },
      type: {
        name: 'string',
        required: true
      }
    },
    // don't need to show empty textfield row
    textField: {
      table: {
        disable: true
      }
    },
    // items is an array, controls can be wonky
    items: {
      control: false
    }
  },
  args: {
    // setting some defaults so controls turn on by default
    clearInputText: 'Clear Search',
    clearInputOnBlur: true,
    clearSearchButton: true,
    loadingMessage: 'Loading...',
    noResultsMessage: 'No results'
  },
  subcomponents: {
    TextField: TextField
  },
  parameters: {
    docs: {
      page: function page() {
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement(Subtitle, null), /*#__PURE__*/React.createElement(Description, null), /*#__PURE__*/React.createElement(ArgsTable, {
          story: PRIMARY_STORY
        }));
      }
    }
  }
};
var listOpts = [{
  id: 'kRf6c2fY',
  name: 'Cook County, IL'
}, {
  id: 'lYf5cGfM',
  name: 'Cook County, MD'
}, {
  id: 'mZfKcGf9',
  name: 'Cook County, TN'
}, {
  id: 'xFz6dLba',
  name: 'Cook County, AK'
}, {
  id: 'vTr5c99',
  name: 'Cook County, FL'
}, {
  id: 'ntY8Lha',
  name: 'Cook County, AL'
}, {
  id: 'uRe0Wqo',
  name: 'Cook County, WA'
}, {
  id: 'yUR7MWl',
  name: 'Cook County, OR'
}];

var Template = function Template(args) {
  return /*#__PURE__*/React.createElement(Autocomplete, _extends({}, args, {
    // using downshifted props
    onChange: function onChange(evt, item) {
      return console.log(item.selectedItem);
    },
    onInputValueChange: function onInputValueChange(evt, input) {
      return console.log('[Autocomplete]: ' + input.inputValue);
    }
  }), /*#__PURE__*/React.createElement(TextField, _extends({}, args.textField, {
    name: "Downshift_autocomplete"
  })));
};

export var Default = Template.bind({});
Default.args = {
  textField: {
    hint: 'Type c then use ARROW keys to change options, ENTER key to make a selection, ESC to dismiss.',
    label: 'Labeled list'
  },
  items: listOpts
};
export var LabeledList = Template.bind({});
LabeledList.args = {
  textField: {
    hint: 'Type c then use ARROW keys to change options, ENTER key to make a selection, ESC to dismiss.',
    label: 'Labeled list'
  },
  label: 'Select from the options below:',
  items: listOpts
};
export var CustomMarkup = Template.bind({});
CustomMarkup.args = {
  textField: {
    hint: 'Clicking the last item should not change the input value to "Search all snacks"',
    label: 'List with custom item markup'
  },
  label: 'Select from the options below:',
  items: [{
    id: '1',
    name: 'Carrots (1)',
    children: /*#__PURE__*/React.createElement(React.Fragment, null, "Carrots ", /*#__PURE__*/React.createElement("strong", null, "(1)"))
  }, {
    id: '2',
    name: 'Cookies (3)',
    children: /*#__PURE__*/React.createElement(React.Fragment, null, "Cookies ", /*#__PURE__*/React.createElement("strong", null, "(3)"))
  }, {
    id: '3',
    name: 'Crackers (2)',
    children: /*#__PURE__*/React.createElement(React.Fragment, null, "Crackers ", /*#__PURE__*/React.createElement("strong", null, "(2)"))
  }, {
    children: /*#__PURE__*/React.createElement("a", {
      href: "#snacks",
      onClick: function onClick() {
        return console.log('Searching for all the snacks!');
      }
    }, "Search all snacks"),
    className: 'ds-c-autocomplete__search-all',
    isResult: false
  }]
};
export var LoadingMessage = Template.bind({});
LoadingMessage.args = {
  clearSearchButton: false,
  loading: true,
  items: [],
  textField: {
    hint: 'List should return string Loading to simulate async data call.',
    label: 'Loading Message'
  }
};
export var NoResults = Template.bind({});
NoResults.args = {
  items: [],
  clearSearchButton: false,
  textField: {
    hint: '',
    label: 'No Results Message'
  }
};