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

type TagWithLabel = TagComponent & { label: string };

const meta: Meta<TagWithLabel> = {
  title: 'Components/Tag',
  id: 'tag',
  component: TagComponent,
  argTypes: {
    label: {
      description:
        'Note that this is not an `@Input()`, it should be placed inside `<nj-tag>`. This must be a simple text or an inline tag element'
    },
    variant: {
      type: 'string',
      control: 'select',
      options: [
        'grey',
        'brand',
        'teal',
        'pink',
        'orange',
        'red',
        'green',
        'ultramarine',
        'yellow',
        'purple',
        'blue',
        'lime'
      ]
    },
    hasCustomIcon: {
      control: {
        type: null
      }
    },
    closeClick: {
      control: {
        type: null
      }
    },
    tagClick: {
      control: {
        type: null
      }
    }
  },
  parameters: {
    docs: {
      imports: [TagComponent]
    }
  }
};

export default meta;

type Story = StoryObj<TagWithLabel>;

export const Tag: Story = {
  args: {
    label: 'Tag'
  },
  render: (args) => ({
    props: args,
    template: `
      <nj-tag ${argsToTemplate(args, { exclude: ['label'] })}>
          {{label}}
      </nj-tag>
    `
  })
};