import React                              from 'react';
import { number, optionsKnob, withKnobs } from '@storybook/addon-knobs';
import { Icon }                           from '../../..';
import { OptionsKnobRecord }              from '../../util/knobs';
import { TabsItem }                       from './tabs-item.component';
import { TabsPanelContainer }             from './tabs-panel-container.component';
import { TabsPanel }                      from './tabs-panel.component';
import { Tabs, TabsPropsType }            from './tabs.component';

export default {
    title:      'GEENEE-UI/Tabs',
    component:  Tabs,
    decorators: [ withKnobs ]
};

export const Playground = () => {
    const [ activeTab, setActiveTab ] = React.useState('0');

    const handleChange = (_event: React.MouseEvent, newTabId: string) => {
        setActiveTab(newTabId);
    };

    const tabsCount = number('TabsCount', 6);
    const width = number('width', 700);
    const height = number('height', 450);

    return (
        <div className="story-wrapper">
            <div className="story-element">
                <h3>Scrollable tabs</h3>
                <div style={ { width, height, display: 'flex', flexDirection: 'column' } }>
                    <Tabs
                        onChange={ handleChange }
                        activeTab={ activeTab }
                        orientation="horizontal"
                        hasScrollButtons
                    >
                        { Array.from({ length: tabsCount }, (item, index) => (
                            <TabsItem
                                label={ (
                                    <div>
                                        <span style={ { color: '#6A6A71' } }>List</span>
                                        { ' ' }
                                        <span>{ index }</span>
                                    </div>
                                ) }
                                tabId={ `${ index }` }
                                key={ `${ index }` }
                                disabled={ index === number('Disabled index', -1) }
                            />
                        )) }
                        <TabsItem
                            label={ <Icon name="add" /> }
                            tabId="other-add"
                        />
                    </Tabs>
                    <TabsPanelContainer activeTabId={ activeTab }>
                        { Array.from({ length: tabsCount }, (item, index) => (
                            <TabsPanel tabPanelId={ `${ index }` }>
                                <div>{ `Content tab ${ index }` }</div>
                            </TabsPanel>
                        )) }
                    </TabsPanelContainer>
                </div>
            </div>
        </div>
    );
};

const tabsOrientation: OptionsKnobRecord<TabsPropsType['orientation']> = {
    default:    undefined,
    vertical:   'vertical',
    horizontal: 'horizontal'
};

export const Vertical = () => {
    const [ activeTab, setActiveTab ] = React.useState('0');

    const handleChange = (_event: React.MouseEvent, newTabId: string) => {
        setActiveTab(newTabId);
    };
    const tabsCount = number('TabsCount', 15);
    const width = number('width', 700);
    const height = number('height', 350);

    const orientation = optionsKnob('Orientation', tabsOrientation, 'vertical', { display: 'select' });

    return (
        <div className="story-wrapper" style={ { width: '100%' } }>
            <div className="story-element" style={ { width: '100%' } }>
                <h3>Vertical tabs</h3>
                <div style={ { width, height, display: 'flex', flexDirection: 'row' } }>
                    <Tabs
                        onChange={ handleChange }
                        activeTab={ activeTab }
                        orientation={ orientation }
                        hasScrollButtons
                    >
                        { Array.from({ length: tabsCount }, (item, index) => (
                            <TabsItem
                                label={ (
                                    <div>
                                        <span style={ { color: '#6A6A71' } }>Other List</span>
                                        { ' ' }
                                        <span>{ index }</span>
                                    </div>
                                ) }
                                tabId={ `other-${ index }` }
                                key={ `other-${ index }` }
                            />
                        )) }
                    </Tabs>
                    <TabsPanelContainer activeTabId={ activeTab }>
                        { Array.from({ length: tabsCount }, (_item, index) => (
                            <TabsPanel tabPanelId={ `other-${ index }` }>
                                { `Content tab other-${ index }` }
                            </TabsPanel>
                        )) }
                    </TabsPanelContainer>
                </div>
            </div>
        </div>
    );
};