import React from 'react';
import {storiesOf} from '@storybook/react';
import {
  array,
  text,
  boolean,
} from '@storybook/addon-knobs';
import {useState} from '@storybook/addons';
import Select from '../../Components/Select/src';

const options = [
  {
    value: 123456,
    label: 'PropellerAds',
    isOptionDisabled: true,
  },
  {
    value: 'Zeydoo',
    label: 'Zeydoo',
  },
  {
    value: 'propush',
    label: 'Propush',
  },
];

const wait = (ms) => new Promise((res) => setTimeout(() => res(), ms));

export default storiesOf('Components | Select', module)
  .add('default', () => {
    const [value, setValue] = useState(null);

    return (
      <Select
        options={options}
        isClearable={boolean('isClearable', true)}
        isDisabled={boolean('isDisabled', false)}
        isLoading={boolean('isLoading', false)}
        isSearchable={boolean('isSearchable', true)}
        id={text('id', 'my-custom-id-for-select')}
        errors={array('errors', [''])}
        value={value}
        onChange={setValue}
        placeholder={text('placeholder', 'Please, select an item')}
        isOptionDisabled={(option) => option.value === options[2].value}
      />
    );
  })
// TODO update Select component
// .add('with icon', () => {
//     const [value, setValue] = useState(null);
//
//     return (
//         <Select
//             options={options}
//             isClearable={boolean('isClearable', true)}
//             isDisabled={boolean('isDisabled', false)}
//             isLoading={boolean('isLoading', false)}
//             isSearchable={boolean('isSearchable', true)}
//             id={text('id', 'my-custom-id-for-select')}
//             icon={props.name.FILTER}
//             errors={array('errors', [''])}
//             value={value}
//             onChange={setValue}
//             placeholder={text('placeholder', 'Please, select an item')}
//             isOptionDisabled={(option) => option.value === options[2].value}
//         />
//     );
// })
  .add('creatable', () => {
    const [value, setValue] = useState(null);
    const [selectOptions, changeOptions] = useState(options);

    async function createOption(newValue) {
      await wait(3000);

      const newOption = {
        value: newValue,
        label: newValue,
      };

      const newOptions = [...selectOptions];
      newOptions.push(newOption);

      changeOptions(newOptions);
      setValue(newOption);
    }

    return (
      <Select
        options={selectOptions}
        isCreatable
        onCreateOption={createOption}
        isClearable={boolean('isClearable', true)}
        isDisabled={boolean('isDisabled', false)}
        isLoading={boolean('isLoading', false)}
        isSearchable={boolean('isSearchable', true)}
        id={text('id', 'my-custom-id-for-select')}
        value={value}
        onChange={setValue}
        createOptionPlaceholder={text('createOptionPlaceholder', 'Create my awesome option ')}
        placeholder={text('placeholder', 'Please, select an item')}
        isOptionDisabled={(option) => option.value === options[2].value}
      />
    );
  });