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

type UiIconButtonComponentInputs = {
  color: IconButtonColor;
  size: IconButtonSize;
  pending: boolean;
  disabled: boolean;
  icon: string;
};

const meta: Meta<UiIconButtonComponentInputs> = {
  component: IconButtonComponent,
  decorators: [
    moduleMetadata({
      imports: [NgIconComponent],
      providers: [provideIcons(IsaIcons)],
    }),
  ],
  title: 'ui/buttons/IconButton',
  argTypes: {
    icon: {
      control: { type: 'select' },
      options: Object.keys(IsaIcons),
      description: 'Icon name for the button',
    },
    color: {
      control: { type: 'select' },
      options: [
        'brand',
        'primary',
        'secondary',
        'tertiary',
      ] as IconButtonColor[],
      description: 'Color style of the button',
    },
    size: {
      control: { type: 'select' },
      options: ['small', 'medium'] as IconButtonSize[],
      description: 'Size of the icon button',
    },
    pending: {
      control: 'boolean',
      description: 'Show a pending state when true',
    },
    disabled: {
      control: 'boolean',
      description: 'Disable the button when true',
    },
  },
  args: {
    icon: 'isaActionCheck',
    color: 'primary',
    size: 'medium',
    pending: false,
    disabled: false,
  },
  render: (args) => ({
    props: args,
    template: `<button uiIconButton name="${args.icon}" ${argsToTemplate(args, { exclude: ['icon'] })} >
        
    </button>`,
  }),
};
export default meta;

type Story = StoryObj<IconButtonComponent>;

export const Default: Story = {
  args: {},
};
