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

type TabWithLabel = TabComponent & { label: string };

const meta: Meta<TabWithLabel> = {
  title: 'Components/Tabs/Tab',
  id: 'tab',
  component: TabComponent,
  argTypes: {
    label: {
      description:
        'Note that this is not an `@Input()`, it should be placed inside `<nj-tab>`. This can be any custom content.'
    },
    isActive: {
      control: {
        type: null
      }
    },
    tabMove: {
      control: {
        type: null
      }
    },
    tabSelect: {
      control: {
        type: null
      }
    }
  },
  decorators: [
    moduleMetadata({
      imports: [TabsComponent]
    }),
    componentWrapperDecorator(TabsComponent)
  ],
  parameters: {
    docs: {
      imports: [TabComponent, TabsComponent]
    }
  }
};

export default meta;

type Story = StoryObj<TabWithLabel>;

export const Tab: Story = {
  args: {
    isActive: false,
    label: 'Label 1'
  },
  render: (args) => ({
    props: args,
    template: `
      <nj-tab ${argsToTemplate(args, { exclude: ['label'] })}>
        <span>{{label}}</span>
        <div tab-content>Content of tab "{{label}}"</div>
      </nj-tab>
  `
  })
};

export const TabWithBadge: Story = {
  args: {
    label: 'Tab label with a badge',
    badgeOptions: { value: 50, emphasis: 'subtle', capedValue: 10 }
  },
  render: (args) => ({
    props: args,
    template: `
    <nj-tab ${argsToTemplate(args, { exclude: ['label'] })}>
      <span>{{label}}</span>
      <div tab-content>Content of tab "{{label}}"</div>
    </nj-tab>
  `
  })
};