import * as React from 'react';
import {withInfo} from '@storybook/addon-info';
import {withKnobs} from '@storybook/addon-knobs';
import {TabBar} from './../../index';
import {storyLayout} from '../../index.stories';

// eslint-disable-next-line no-restricted-syntax
export default {
    title: 'TabBar',
    decorators: [withInfo, withKnobs, storyLayout]
};

const tabs = [
    {key: 'a', tab: 'TabA'},
    {key: 'b', tab: 'TabB'},
    {key: 'c', tab: 'TabC'},
    {key: 'd', tab: 'TabD'},
    {key: 'e', tab: 'TabE', isDisabled: true},
    {key: 'f', tab: 'TabF'},
    {key: 'g', tab: 'TabG'},
    {key: 'h', tab: 'TabH'},
    {key: 'i', tab: 'TabI'}
];

export const simpleTabs = () => {
    const [selected, setState] = React.useState('a');

    return (
        <TabBar
            defaultSelectedTab={selected}
            tabs={tabs}
            onTabSelect={(key: string) => setState((key))}
        />
    );
};