import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Tabs from './index';
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'

class Comp1 extends React.Component {
  render() {
    return (<div>I am component 1</div>)
  }
}
class Comp2 extends React.Component {
  render() {
    return (<div>I am component 2</div>)
  }
}
storiesOf('Tabs', module)
  .add('Tabs Component',
     withInfo('This is a tabs components that is configured from outside , it provides you with the Tabs UX and the click functionality on tabs and also the selected state of the tabs .')(
          () => {
            var selected = {
              'label':'tab1'
            }
            debugger
            return <Tabs
              tabs={[{
                'label':'tab1',
                'component' : Comp1
              },
              {
                'label':'tab2',
                'component' : Comp2
              }]}
              selected={object('Data for selected',selected)}
              width={text('width','100px')}
              onChange={(val)=>{
                alert('here');
                console.log(val);
                action(val)}
              }
            />
          }
     ))