import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { TabComponent, TabsComponent } from '../../public-api';

const meta: Meta<TabsComponent> = {
  title: 'Components/Tabs/Tabs',
  id: 'tabs',
  component: TabsComponent,
  argTypes: {
    selectedTab: {
      control: {
        type: null
      }
    }
  },
  decorators: [
    moduleMetadata({
      imports: [TabComponent]
    })
  ],
  parameters: {
    docs: {
      imports: [TabComponent, TabsComponent]
    }
  }
};

export default meta;

type Story = StoryObj<TabsComponent>;

export const Tabs: Story = {
  args: {
    label: 'Example tabs label'
  },
  render: (args) => ({
    props: args,
    template: `
    <nj-tabs ${argsToTemplate(args)}>
      <nj-tab [badgeOptions]="{ value: 50, emphasis: 'subtle', capedValue: 10 }">
        <ng-container>Label 1</ng-container>
        <div tab-content>
          <p>Content 1</p>
        </div>
      </nj-tab>
      <nj-tab>
        <ng-container>Label 2</ng-container>
        <div tab-content>
          <p>Content 2</p>
        </div>
      </nj-tab>
      <nj-tab isDisabled="true">
        <ng-container>Label 3</ng-container>
        <div tab-content>
          <p>Content 3</p>
        </div>
      </nj-tab>
      <nj-tab>
        <ng-container>Label 4</ng-container>
        <div tab-content>
          <p>Content 4</p>
        </div>
      </nj-tab>
      <nj-tab isDisabled="true">
        <ng-container>Label 5</ng-container>
        <div tab-content>
          <p>Content 5</p>
        </div>
      </nj-tab>
    </nj-tabs>
  `
  })
};