import { useRef, useState } from 'react';
import { Card, CardContent, CardHeader, Flex, TabPanel, Tabs, Text } from '@pega/cosmos-react-core';
import { TabsMock } from './Tabs.mocks';
export default {
    title: 'Core/Tabs',
    component: Tabs,
    args: {
        type: 'horizontal'
    },
    argTypes: {
        type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }
    }
};
export const TabsDemo = (args) => {
    const [panelShown, changePanel] = useState('1');
    const tabsRef = useRef(null);
    const handleTabChange = (id) => {
        changePanel(id);
    };
    const tabs = [
        { name: 'Tab 1', id: '1' },
        { name: 'Tab 2', id: '2' },
        { name: 'Tab 3', id: '3', errors: 0 },
        { name: 'Tab 4', id: '4', disabled: true },
        { name: 'Tab 5', id: '5', errors: 2 },
        { name: 'Tab 6', id: '6', count: 4 },
        { name: 'Tab 7', id: '7' },
        { name: 'Tab 8', id: '8' },
        { name: 'Tab 9', id: '9' },
        { name: 'Very long tab name 10', id: '10' }
    ];
    return (<Card container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>
      <CardHeader container={{ direction: 'column' }}>
        {args.showHeader && <Text variant='h2'>Details</Text>}
        <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} ref={tabsRef}/>
      </CardHeader>
      <CardContent>
        {tabs.map(({ id, name }) => (<TabPanel tabId={id} currentTabId={panelShown} title={args.type === 'horizontal' ? name : undefined} tablistRef={tabsRef} tablistType={args.type} key={id}>
            <Flex container={{
                direction: 'column',
                rowGap: 1,
                ...(args.type === 'vertical' && { pad: [1, 2] })
            }}>
              <div>{name} content</div>
              {id === '1' && <TabsMock type={args.type}/>}
            </Flex>
          </TabPanel>))}
      </CardContent>
    </Card>);
};
TabsDemo.args = {
    showHeader: true
};
TabsDemo.argTypes = {
    showHeader: { control: { type: 'boolean' } }
};
export const TabsCountDemo = (args) => {
    return <TabsMock type={args.type}/>;
};
//# sourceMappingURL=Tabs.stories.jsx.map