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

type InlineMessageWithLabel = InlineMessageComponent & { label?: string };

const meta: Meta<InlineMessageWithLabel> = {
  title: 'Components/Inline Message',
  id: 'inline-message',
  component: InlineMessageComponent,
  decorators: [
    moduleMetadata({
      imports: [LinkComponent]
    })
  ],
  argTypes: {
    closeClick: {
      control: {
        type: null
      }
    }
  },
  parameters: {
    docs: {
      imports: [InlineMessageComponent]
    }
  }
};

export default meta;

type Story = StoryObj<InlineMessageWithLabel>;

export const InlineMessage: Story = {
  render: (args) => ({
    props: args,
    template: `
      <nj-inline-message ${argsToTemplate(args)}>
          <span njInlineMessageTitle>Title <b>{{variant ?? 'error'}}</b> Message</span>
          <div>
            Message description or
            <nj-link [variant]="variant === 'fatal-error' ? 'inverse': 'high-contrast'" href="">remediation action</nj-link>
          </div>
      </nj-inline-message>
    `
  })
};