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

type StatusIndicatorWithLabel = StatusIndicatorComponent & { label: string };

const meta: Meta<StatusIndicatorWithLabel> = {
  title: 'Components/Status Indicator',
  id: 'status-indicator',
  component: StatusIndicatorComponent,
  argTypes: {
    label: {
      description:
        'Note that this is not an `@Input()`, it should be placed inside `<nj-status-indicator>`. This must be any string or valid descendant of `<p>` tag'
    },
    status: {
      table: {
        defaultValue: {
          summary: 'online'
        }
      }
    },
    size: {
      table: {
        defaultValue: {
          summary: 'md'
        }
      }
    }
  },
  decorators: [
    componentWrapperDecorator(
      (story) => `
        <div style="padding: var(--nj-semantic-size-spacing-24) var(--nj-semantic-size-spacing-16); background: var(--nj-semantic-color-background-neutral-secondary-default)">${story}</div>
    `
    )
  ],
  parameters: {
    docs: {
      imports: [StatusIndicatorComponent]
    }
  }
};

export default meta;

type Story = StoryObj<StatusIndicatorWithLabel>;

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