import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { Dropdown } from 'components/UI'

storiesOf('Components', module).addWithChapters('Dropdown', {
  chapters: [
    {
      sections: [
        {
          title: 'Left justify (default)',
          sectionFn: () => {
            const activeKey = 'btc'
            const items = [
              {
                key: 'btc',
                value: 'BTC',
              },
              {
                key: 'bits',
                value: 'bits',
              },
              {
                key: 'sats',
                value: 'satoshis',
              },
            ]
            return <Dropdown activeKey={activeKey} items={items} onChange={action('onChange')} />
          },
        },
        {
          title: 'Right justify',
          sectionFn: () => {
            const activeKey = 'usd'
            const items = [
              {
                key: 'usd',
                value: 'USD',
              },
              {
                key: 'eur',
                value: 'EUR',
              },
              {
                key: 'gbp',
                value: 'GBP',
              },
            ]
            return (
              <Dropdown
                activeKey={activeKey}
                items={items}
                justify="right"
                onChange={action('onChange')}
              />
            )
          },
        },
      ],
    },
  ],
})

@@ -5,16 +5,30 @@
 rt React
+, %7B useState %7D
  from 'r
@@ -29,24 +29,24 @@
 rom 'react'%0A
-
 import %7B sto
@@ -145,16 +145,24 @@
 Dropdown
+, Button
  %7D from 
@@ -176,16 +176,1230 @@
 ents/UI'
+%0Aimport Settings from 'components/Icon/Settings'%0A%0A// eslint-disable-next-line react/prop-types%0Aconst IconDropdownButton = (%7B onToggle %7D) =%3E %7B%0A  return (%0A    %3CButton onClick=%7BonToggle%7D size=%22small%22 variant=%22secondary%22%3E%0A      %3CSettings height=%2216px%22 width=%2216px%22 /%3E%0A    %3C/Button%3E%0A  )%0A%7D%0A// To create multiselect dropdown set %60isMultiselect%60 to true and%0A// Provide a custom %60buttonComponent%60. The latter is not required, but in multiselect%0A// mode dropdown selected text value will show all values concatenated which is not pretty.%0Aconst MultiselectDropdown = () =%3E %7B%0A  const %5BactiveItems, setActiveItems%5D = useState(new Set(%5B'usd'%5D))%0A  const items = %5B%0A    %7B%0A      key: 'usd',%0A      value: 'USD',%0A    %7D,%0A    %7B%0A      key: 'eur',%0A      value: 'EUR',%0A    %7D,%0A    %7B%0A      key: 'gbp',%0A      value: 'GBP',%0A    %7D,%0A  %5D%0A  const onChange = value =%3E %7B%0A    const updated = new Set(%5B...activeItems%5D)%0A    if (updated.has(value)) %7B%0A      updated.delete(value)%0A    %7D else %7B%0A      updated.add(value)%0A    %7D%0A    setActiveItems(updated)%0A  %7D%0A%0A  return (%0A    %3CDropdown%0A      activeKey=%7BactiveItems%7D%0A      buttonComponent=%7BIconDropdownButton%7D%0A      isMultiselect%0A      items=%7Bitems%7D%0A      justify=%22left%22%0A      onChange=%7BonChange%7D%0A    /%3E%0A  )%0A%7D
 %0A%0Astorie
@@ -2683,24 +2683,24 @@
          /%3E%0A
-
             
@@ -2721,24 +2721,162 @@
 %0A        %7D,%0A
+        %7B%0A          title: 'Multiselect',%0A          sectionFn: () =%3E %7B%0A            return %3CMultiselectDropdown /%3E%0A          %7D,%0A        %7D,%0A
       %5D,%0A   

add multiselect dropdown example