import { InfoButtonComponent } from '@isa/ui/buttons';
import { NgIconComponent, provideIcons } from '@ng-icons/core';
import { IsaIcons } from '@isa/icons';
import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';

type InfoButtonComponentInputs = {
  icon: string;
  pending: boolean;
  label: string;
  disabled: boolean;
};

const meta: Meta<InfoButtonComponentInputs> = {
  component: InfoButtonComponent,
  decorators: [
    moduleMetadata({
      imports: [NgIconComponent],
      providers: [provideIcons(IsaIcons)],
    }),
  ],
  title: 'ui/buttons/InfoButton',
  args: {
    icon: 'isaNavigationLogout',
    label: 'STA',
    disabled: false,
    pending: false,
  },
  argTypes: {
    icon: {
      control: { type: 'select' },
      options: Object.keys(IsaIcons),
      description: 'Icon to display on the button',
    },
    label: {
      control: 'text',
      description: 'Label text inside the button',
    },
    disabled: {
      control: 'boolean',
      description: 'Disables the button when true',
    },
    pending: {
      control: 'boolean',
      description: 'Shows a pending state when true',
    },
  },
  render: (args) => ({
    props: args,
    template: `<button uiInfoButton ${argsToTemplate(args, { exclude: ['icon'] })} >
        <span uiInfoButtonLabel>${args.label}</span>
        <ng-icon name="${args.icon}" uiInfoButtonIcon></ng-icon>
    </button>`,
  }),
};

export default meta;

type Story = StoryObj<InfoButtonComponentInputs>;

export const Default: Story = {
  args: {
    icon: 'isaNavigationLogout',
    label: 'STA',
  },
};
