import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Router } from '../../containers/Router/Router';
import { ChangeEvent } from 'react';
import { LinkTabProps } from './LinkTab/LinkTab';
import { NavBar } from './NavBar';
import { Grid } from '@mui/material';

export default {
  title: 'Components/NavBar',
  component: NavBar
} as ComponentMeta<typeof NavBar>;

const tabs: LinkTabProps[] = [
  { label: 'Tab 1 Internal', to: '/', external: true },
  { label: 'Tab 2 External', to: '/', external: false }
];

var currentValue = 0;
const handleTabChange = (_event: ChangeEvent<unknown>, newValue: number) => (currentValue = newValue);

const Template: ComponentStory<typeof NavBar> = (args) => (
  <Grid key={2} item xs={12}>
    <NavBar {...args} /> <Router defaultComponent={{ path: '/', component: <div>TEST</div> }} />
  </Grid>
);

export const DefaultNavBar = Template.bind({});
DefaultNavBar.args = {
  tabs: tabs,
  actionBarTitle: 'Test title',
  ActionBarProps: { title: 'Test title' },
  activeTab: currentValue,
  onTabChange: handleTabChange
};