import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
import { ButtonColor, ButtonSize, ButtonComponent } from '@isa/ui/buttons';

type UiButtonComponentInputs = {
  color: ButtonColor;
  size: ButtonSize;
  pending: boolean;
  disabled: boolean;
};

const meta: Meta<UiButtonComponentInputs> = {
  component: ButtonComponent,
  title: 'ui/buttons/Button',
  argTypes: {
    color: {
      control: { type: 'select' },
      options: Object.values(ButtonColor),
      description: 'Determines the button color',
    },
    size: {
      control: { type: 'select' },
      options: ['small', 'medium', 'large'] as ButtonSize[],
      description: 'Determines the button size',
    },
    pending: {
      control: 'boolean',
      description: 'Show a pending/loading state when true',
    },
    disabled: {
      control: 'boolean',
      description: 'Disables the button when true',
    },
  },
  args: {
    color: 'primary',
    size: 'medium',
    pending: false,
    disabled: false,
  },
  render: (args) => ({
    props: args,
    template: `<button uiButton ${argsToTemplate(args)}>Button</button>`,
  }),
};
export default meta;

type Story = StoryObj<ButtonComponent>;

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

// export const Heading: Story = {
//   args: {},
//   play: async ({ canvasElement }) => {
//     const canvas = within(canvasElement);
//     expect(canvas.getByText(/ui-button works!/gi)).toBeTruthy();
//   },
// };

export const PrimarySmall: Story = {
  args: {
    color: 'primary',
    size: 'small',
  },
};

export const PrimaryLarge: Story = {
  args: {
    color: 'primary',
    size: 'large',
  },
};
