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

const meta: Meta<ListGroupComponent> = {
  title: 'Components/List/List',
  id: 'list',
  component: ListGroupComponent,
  decorators: [
    moduleMetadata({
      imports: [ListItemComponent]
    })
  ],
  argTypes: {
    isCheckboxList: {
      control: {
        type: null
      }
    },
    isCustomSelectList: {
      control: {
        type: null
      }
    },
    isMultiSelect: {
      control: {
        type: null
      }
    }
  },
  parameters: {
    docs: {
      imports: [ListGroupComponent, ListItemComponent]
    }
  }
};

export default meta;

type Story = StoryObj<ListGroupComponent>;

export const List: Story = {
  render: (args) => ({
    props: args,
    template: `
      <nj-list-group ${argsToTemplate(args)}>
        <li nj-list-item>Label 1</li>
        <li nj-list-item>Label 2</li>
        <li nj-list-item>Label 3</li>
        <li nj-list-item>Label 4</li>
        <li nj-list-item>Label 5</li>
        <li nj-list-item>Label 6</li>
      </nj-list-group>
    `
  })
};
export const WithLinksAndButtons: Story = {
  args: {
    isClickable: true
  },
  render: (args) => ({
    props: args,
    template: `
      <nj-list-group ${argsToTemplate(args)}>
        <li nj-list-item type="link">
          Label
        </li>
        <li nj-list-item type="link">
          Label 2
        </li>
        <li nj-list-item type="button">
          Label 3
        </li>
        <li nj-list-item type="button">
          Label 4
        </li>
        <li nj-list-item type="link" href="#">
          Label 5
        </li>
        <li nj-list-item type="link">
          Label 6
        </li>
      </nj-list-group>
    `
  })
};