import type { Meta, StoryObj } from '@storybook/react';
import Button from '../index.js';
import { ButtonAsButtonProps } from '../types.js';
import { withButtonStyles } from './ButtonDecorator.js';
import { SBContainer, SBFocusWrapper } from '@sb-utils';

const meta: Meta<ButtonAsButtonProps> = {
  title: 'Component Library/Button/As Button',
  component: Button,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: `The Button component with buttonType="button" renders as a \`<button>\` element for interactive actions that require JavaScript.`,
      },
    },
  },
  args: {
    buttonType: 'button',
  },
  decorators: [withButtonStyles],
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    variant: 'primaryButton',
    children: 'Button',
    onClick: () => alert('Button clicked!'),
  },
};

export const WithIcon: Story = {
  args: {
    variant: 'primaryButton',
    children: 'Button',
    onClick: () => alert('Button clicked!'),
    showIcon: true,
    iconFieldPath: 'icon',
    iconPosition: 'right',
  },
};

export const DisabledStates: Story = {
  name: 'Disabled States',
  render: () => (
    <SBContainer flex direction="column" gap="medium">
      <SBContainer addBackground>
        <h4>Enabled State</h4>
        <Button buttonType="button" variant="primary" disabled={false}>
          Enabled
        </Button>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Disabled State</h4>
        <p>Disabled buttons cannot be clicked and are visually distinguished</p>
        <Button buttonType="button" variant="primary" disabled>
          Disabled
        </Button>
      </SBContainer>
    </SBContainer>
  ),
};

export const InteractionStates: Story = {
  name: 'Interaction States',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer addBackground>
        <h4>Hover State</h4>
        <p>Hover over the button to see the hover effect</p>
        <Button buttonType="button" variant="primary">
          Hover me
        </Button>
      </SBContainer>

      <SBContainer addBackground>
        <h4>Focus State</h4>
        <p>
          In production, this focus outline appears when navigating with the
          keyboard (Tab key). This Storybook demo auto-applies the focus state
          to show how it looks.
        </p>
        <SBFocusWrapper>
          <Button buttonType="button" variant="primary">
            Focused button
          </Button>
        </SBFocusWrapper>
      </SBContainer>
    </SBContainer>
  ),
};
