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

const meta: Meta<BadgeComponent> = {
  title: 'Components/Badge',
  id: 'badge',
  component: BadgeComponent,
  decorators: [
    moduleMetadata({
      imports: [CustomIconDirective]
    })
  ],
  parameters: {
    docs: {
      imports: [BadgeComponent, CustomIconDirective]
    }
  },
  argTypes: {
    size: {
      type: 'string',
      control: 'radio',
      options: ['sm', 'md', 'lg']
    }
  }
};

export default meta;

type Story = StoryObj<BadgeComponent>;

export const Badge: Story = {
  args: {
    value: 120,
    isUppercase: false
  }
};

export const BadgeWithContent: Story = {
  args: {
    size: 'lg'
  },
  render: (args) => ({
    props: args,
    template: `
    <nj-badge ${argsToTemplate(args)}>
        Information badge
    </nj-badge>
  `
  })
};

export const WithCustomIcon: Story = {
  render: (args) => ({
    props: args,
    template: `
    <nj-badge ${argsToTemplate(args)}>
        <svg
          *njCustomIcon
          aria-hidden="true"
          focusable="false"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
          [ngStyle]="{
            stroke: 'var(--nj-badge-icon-color)',
            fill: 'none'
          }"
        >
            <path d="M10.5 5.5V6.5H9.5V5.5H10.5ZM10.5 9.5V14.5H9.5V9.5H10.5ZM0.5 10C0.5 4.75614 4.75614 0.5 10 0.5C15.2439 0.5 19.5 4.75614 19.5 10C19.5 15.2439 15.2439 19.5 10 19.5C4.75614 19.5 0.5 15.2439 0.5 10ZM1.5 10C1.5 14.6861 5.31386 18.5 10 18.5C14.6861 18.5 18.5 14.6861 18.5 10C18.5 5.31386 14.6861 1.5 10 1.5C5.31386 1.5 1.5 5.31386 1.5 10Z" />
        </svg>
        with icon
    </nj-badge>
  `
  })
};