import type { Meta, StoryObj } from '@storybook/react';

import { IconName } from '@noodl-core-ui/components/common/Icon';
import { PrimaryButton } from '@noodl-core-ui/components/inputs/PrimaryButton';
import { Container, ContainerDirection } from '@noodl-core-ui/components/layout/Container';

import { SideNavigation, SideNavigationButton } from './SideNavigation';

const meta: Meta<typeof SideNavigation> = {
  title: 'App/Side Navigation',
  component: SideNavigation,
  argTypes: {}
};

export default meta;
type Story = StoryObj<typeof meta>;

const Template: Story = (args) => (
  <div style={{ width: '380px', height: '800px' }}>
    <SideNavigation {...args} />
  </div>
);

export const Common: Story = {
  args: {
  toolbar: (
    <>
      <Container direction={ContainerDirection.Vertical} UNSAFE_style={{ flex: '1' }}>
        <SideNavigationButton icon={IconName.Components} label={'Components'} />
        <SideNavigationButton icon={IconName.Search} label={'Search'} />
        <SideNavigationButton icon={IconName.Collaboration} label={'Collaboration'} />
        <SideNavigationButton icon={IconName.StructureCircle} label={'Version control'} notification={{ count: 2 }} />
        <SideNavigationButton icon={IconName.StructureCircle} label={'Version control'} notification={{ count: 100 }} />
        <SideNavigationButton icon={IconName.CloudData} label={'Cloud Services'} />
        <SideNavigationButton icon={IconName.CloudFunction} label={'Cloud functions'} />
        <SideNavigationButton icon={IconName.Setting} label={'Project settings'} />
      </Container>
      <Container direction={ContainerDirection.Vertical}>
        <SideNavigationButton icon={IconName.SlidersHorizontal} label={'Editor settings'} />
      </Container>
    </>
  ),
  panel: (
    <Container hasXSpacing hasYSpacing>
      <PrimaryButton label="Hello World" isGrowing />
    </Container>
  )
},
};
