import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Toast , openToast } from './Toast'
import {
  text,
  boolean,
  number,
  object,
  array,
  selectV2,
  date,
  color,
  button,
  select
} from '@storybook/addon-knobs/react';
import { withInfo } from '@storybook/addon-info';
import { linkTo } from '@storybook/addon-links'
import {ToastComp} from './ToastComponent'

const Wrap = _p => (
  <div>
    <button onClick={()=>{
      openToast(_p)
    }}>Show Toast</button>
    <Toast />
  </div>
)

storiesOf('Toast', module)
  .add('Message Toast',
     withInfo('info text')(
          () => (
            <Wrap
              message = {text('message','Your toast is ready')}
              washoutTime = {number('washoutTime',5000)}
              position = {select('position', {
                'top-right':'top-right',
                'bottom': 'bottom'
              }, 'bottom' , 'groupId')}
            />
          )
     ))
  .add('Component Toast washout time 2s',
     withInfo('info text')(
        () => (
          <Wrap
              msg = {text('message','Your toast is ready')}
              washoutTime = {number('washoutTime',5000)}
              position = {select('position', {
                'top-right':'top-right',
                'bottom': 'bottom'
              }, 'bottom' , 'groupId')}
              theme = {select('theme', {
                'red' : 'red',
                'green' : 'green'
              }, 'red' , 'groupId')}
              component = {ToastComp}
          />
        )
     ))