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

type ListItemWithLabel = ListItemComponent & { label?: string };
const meta: Meta<ListItemComponent> = {
  title: 'Components/List/List Item',
  id: 'list-item',
  component: ListItemComponent,
  decorators: [
    moduleMetadata({
      imports: [ListGroupComponent, BadgeComponent]
    }),
    componentWrapperDecorator(ListGroupComponent)
  ],
  argTypes: {
    checkboxContentId: {
      control: {
        type: null
      }
    },
    isCheckboxContent: {
      control: {
        type: null
      }
    },
    itemClick: {
      control: {
        type: null
      }
    }
  },
  parameters: {
    docs: {
      imports: [ListGroupComponent, ListItemComponent]
    }
  }
};

export default meta;

type Story = StoryObj<ListItemWithLabel>;

export const ListItem: Story = {
  args: {
    label: 'Label',
    iconName: 'check',
    href: '#'
  },
  render: (args) => ({
    props: args,
    template: `
      <li nj-list-item ${argsToTemplate(args, { exclude: ['label'] })}>
          {{label}}
          <nj-badge [value]="120" njListItemRightContent></nj-badge>
      </li>
    `
  })
};