import filter from 'lodash/filter.js';
import React, { useState } from 'react';
import { FormGroup } from '../../index.js';
import { Box } from '../../atoms/box/index.js';
import StoryWrapper from '../../utils/story-wrapper.js';
import { Select } from './select.js';
import { SelectAsync } from './select-async.js';
export default {
  title: 'DesignSystem/Molecules/Select',
  component: Select,
  parameters: {
    controls: {
      include: ['variant']
    }
  },
  argTypes: {
    variant: {
      defaultValue: 'default',
      options: ['default', 'filter'],
      control: {
        type: 'select'
      }
    }
  }
};
export const Default = () => {
  const [value, setValue] = useState();
  const options = [{
    value: 'chocolate',
    label: 'Chocolate'
  }, {
    value: 'strawberry',
    label: 'Strawberry'
  }, {
    value: 'vanilla',
    label: 'Vanilla'
  }];
  return /*#__PURE__*/React.createElement(Box, {
    width: 1
  }, /*#__PURE__*/React.createElement(StoryWrapper, {
    label: "Select example"
  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Select, {
    value: value,
    onChange: selected => setValue(selected),
    options: options
  }))));
};
export const Async = () => {
  const [valueAsync, setValueAsync] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const loadOptions = async inputValue => {
    const options = [{
      value: 'chocolate',
      label: 'Chocolate'
    }, {
      value: 'strawberry',
      label: 'Strawberry'
    }, {
      value: 'vanilla',
      label: 'Vanilla'
    }];
    setIsLoading(true);
    const found = filter(options, ({
      value
    }) => value.includes(inputValue));
    setIsLoading(false);
    return Promise.resolve(found);
  };
  return /*#__PURE__*/React.createElement(Box, {
    width: 1
  }, /*#__PURE__*/React.createElement(StoryWrapper, {
    label: "Select async example"
  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(SelectAsync, {
    value: valueAsync,
    onChange: selected => setValueAsync(selected),
    loadOptions: loadOptions,
    isLoading: isLoading
  }))));
};