import type { Meta, StoryObj } from '@storybook/html';
import '@42/styles/button.css';

const PLUS_ICON =
  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>';

interface ButtonArgs {
  label: string;
  variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
  size: 'sm' | 'md' | 'lg';
  disabled: boolean;
}

const meta: Meta<ButtonArgs> = {
  title: 'Presentational/Button',
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'outline', 'ghost', 'danger'],
    },
    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
    disabled: { control: 'boolean' },
    label: { control: 'text' },
  },
  args: {
    label: 'Button',
    variant: 'primary',
    size: 'md',
    disabled: false,
  },
  render: ({ label, variant, size, disabled }) => {
    const button = document.createElement('button');
    button.className = 'c42-button';
    button.dataset.variant = variant;
    if (size !== 'md') {
      button.dataset.size = size;
    }
    button.disabled = disabled;
    button.textContent = label;
    return button;
  },
};

export default meta;

type Story = StoryObj<ButtonArgs>;

export const Primary: Story = {};
export const Secondary: Story = { args: { variant: 'secondary' } };
export const Outline: Story = { args: { variant: 'outline' } };
export const Ghost: Story = { args: { variant: 'ghost' } };
export const Danger: Story = { args: { variant: 'danger' } };

export const Disabled: Story = { args: { disabled: true } };

export const IconOnly: Story = {
  args: { label: 'Add item', variant: 'primary' },
  render: ({ label, variant, size, disabled }) => {
    const button = document.createElement('button');
    button.className = 'c42-button';
    button.dataset.variant = variant;
    button.dataset.icon = '';
    if (size !== 'md') {
      button.dataset.size = size;
    }
    button.disabled = disabled;
    button.innerHTML = `${PLUS_ICON}<span class="c42-sr-only">${label}</span>`;
    return button;
  },
};

export const IconWithLabel: Story = {
  args: { label: 'Add item', variant: 'primary' },
  render: ({ label, variant, size, disabled }) => {
    const button = document.createElement('button');
    button.className = 'c42-button';
    button.dataset.variant = variant;
    if (size !== 'md') {
      button.dataset.size = size;
    }
    button.disabled = disabled;
    button.innerHTML = `${PLUS_ICON}<span>${label}</span>`;
    return button;
  },
};