/**
 * Copyright IBM Corp. 2016, 2018
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
import ComboBox from '../ComboBox';
import Button from '../Button';

const items = [
  {
    id: 'option-0',
    text: 'Option 1',
  },
  {
    id: 'option-1',
    text: 'Option 2',
  },
  {
    id: 'option-2',
    text: 'Option 3',
    selected: true,
  },
  {
    id: 'option-3',
    text: 'Option 4',
  },
  {
    id: 'option-4',
    text:
      'An example option that is really long to show what should be done to handle long text',
  },
];

const sizes = {
  'Extra large size (xl)': 'xl',
  'Default size': undefined,
  'Small size (sm)': 'sm',
};

const directions = {
  'Bottom (default)': 'bottom',
  'Top ': 'top',
};

const props = () => ({
  id: text('Combobox ID (id)', 'carbon-combobox-example'),
  placeholder: text('Placeholder text (placeholder)', 'Filter...'),
  titleText: text('Title (titleText)', 'Combobox title'),
  helperText: text('Helper text (helperText)', 'Optional helper text here'),
  light: boolean('Light (light)', false),
  disabled: boolean('Disabled (disabled)', false),
  invalid: boolean('Invalid (invalid)', false),
  invalidText: text('Invalid text (invalidText)', 'A valid value is required'),
  size: select('Field size (size)', sizes, undefined) || undefined,
  direction: select('Dropdown direction (direction)', directions, 'bottom'),
  onChange: action('onChange'),
});

const ControlledComboBoxApp = props => {
  const [selectedItem, setSelectedItem] = useState(items[0]);
  let uid = items.length;
  return (
    <>
      <ComboBox
        {...props}
        items={items}
        itemToString={item => (item ? item.text : '')}
        onChange={({ selectedItem }) => setSelectedItem(selectedItem)}
        initialSelectedItem={items[0]}
        selectedItem={selectedItem}
      />
      <Button
        style={{ marginTop: '1rem' }}
        onClick={() => {
          items.push({
            id: `id-${uid++}`,
            text: `Option ${uid}`,
          });
          setSelectedItem(items[items.length - 1]);
        }}>
        Add new item
      </Button>
    </>
  );
};
ControlledComboBoxApp.__docgenInfo = {
  ...ComboBox.__docgenInfo,
  props: {
    ...ComboBox.__docgenInfo.props,
  },
};

storiesOf('ComboBox', module)
  .addDecorator(withKnobs)
  .add(
    'Default',
    () => (
      <div style={{ width: 300 }}>
        <ComboBox
          items={items}
          itemToString={item => (item ? item.text : '')}
          {...props()}
        />
      </div>
    ),
    {
      info: {
        text: 'ComboBox',
      },
    }
  )
  .add(
    'application-level control for selection',
    () => <ControlledComboBoxApp {...props()} />,
    {
      info: {
        text: `Controlled ComboBox example application`,
      },
    }
  );

@@ -188,22 +188,8 @@
 eact
-, %7B useState %7D
  fro
@@ -191,32 +191,32 @@
 t from 'react';%0A
+
 import %7B stories
@@ -410,40 +410,8 @@
 ox';
-%0Aimport Button from '../Button';
 %0A%0Aco
@@ -1661,842 +1661,8 @@
 );%0A%0A
-const ControlledComboBoxApp = props =%3E %7B%0A  const %5BselectedItem, setSelectedItem%5D = useState(items%5B0%5D);%0A  let uid = items.length;%0A  return (%0A    %3C%3E%0A      %3CComboBox%0A        %7B...props%7D%0A        items=%7Bitems%7D%0A        itemToString=%7Bitem =%3E (item ? item.text : '')%7D%0A        onChange=%7B(%7B selectedItem %7D) =%3E setSelectedItem(selectedItem)%7D%0A        initialSelectedItem=%7Bitems%5B0%5D%7D%0A        selectedItem=%7BselectedItem%7D%0A      /%3E%0A      %3CButton%0A        style=%7B%7B marginTop: '1rem' %7D%7D%0A        onClick=%7B() =%3E %7B%0A          items.push(%7B%0A            id: %60id-$%7Buid++%7D%60,%0A            text: %60Option $%7Buid%7D%60,%0A          %7D);%0A          setSelectedItem(items%5Bitems.length - 1%5D);%0A        %7D%7D%3E%0A        Add new item%0A      %3C/Button%3E%0A    %3C/%3E%0A  );%0A%7D;%0AControlledComboBoxApp.__docgenInfo = %7B%0A  ...ComboBox.__docgenInfo,%0A  props: %7B%0A    ...ComboBox.__docgenInfo.props,%0A  %7D,%0A%7D;%0A%0A
 stor
@@ -1949,32 +1949,32 @@
 %7B%0A      info: %7B%0A
+
         text: 'C
@@ -2002,209 +2002,8 @@
   %7D%0A
-  )%0A  .add(%0A    'application-level control for selection',%0A    () =%3E %3CControlledComboBoxApp %7B...props()%7D /%3E,%0A    %7B%0A      info: %7B%0A        text: %60Controlled ComboBox example application%60,%0A      %7D,%0A    %7D%0A
   );

update ComboBox story to remove controlled example (#6040)