"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.NoResults = exports.LoadingMessage = exports.LabeledList = exports.Default = exports.CustomMarkup = void 0;

var _react = _interopRequireDefault(require("react"));

var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));

var _TextField = _interopRequireDefault(require("../TextField/TextField"));

var _addonDocs = require("@storybook/addon-docs");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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); }

var _default = {
  title: 'Components/Autocomplete',
  component: _Autocomplete.default,
  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.default
  },
  parameters: {
    docs: {
      page: function page() {
        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_addonDocs.Title, null), /*#__PURE__*/_react.default.createElement(_addonDocs.Subtitle, null), /*#__PURE__*/_react.default.createElement(_addonDocs.Description, null), /*#__PURE__*/_react.default.createElement(_addonDocs.ArgsTable, {
          story: _addonDocs.PRIMARY_STORY
        }));
      }
    }
  }
};
exports.default = _default;
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.default.createElement(_Autocomplete.default, _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.default.createElement(_TextField.default, _extends({}, args.textField, {
    name: "Downshift_autocomplete"
  })));
};

var Default = Template.bind({});
exports.Default = Default;
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
};
var LabeledList = Template.bind({});
exports.LabeledList = LabeledList;
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
};
var CustomMarkup = Template.bind({});
exports.CustomMarkup = CustomMarkup;
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.default.createElement(_react.default.Fragment, null, "Carrots ", /*#__PURE__*/_react.default.createElement("strong", null, "(1)"))
  }, {
    id: '2',
    name: 'Cookies (3)',
    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Cookies ", /*#__PURE__*/_react.default.createElement("strong", null, "(3)"))
  }, {
    id: '3',
    name: 'Crackers (2)',
    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Crackers ", /*#__PURE__*/_react.default.createElement("strong", null, "(2)"))
  }, {
    children: /*#__PURE__*/_react.default.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
  }]
};
var LoadingMessage = Template.bind({});
exports.LoadingMessage = LoadingMessage;
LoadingMessage.args = {
  clearSearchButton: false,
  loading: true,
  items: [],
  textField: {
    hint: 'List should return string Loading to simulate async data call.',
    label: 'Loading Message'
  }
};
var NoResults = Template.bind({});
exports.NoResults = NoResults;
NoResults.args = {
  items: [],
  clearSearchButton: false,
  textField: {
    hint: '',
    label: 'No Results Message'
  }
};