import type { Meta, StoryObj } from '@storybook/react'
import { SvgAdd } from '../../icons'
import { Button } from './Button'
import {
  BUTTON_SET_ORIENTATION_OPTIONS,
  BUTTON_SET_SIZE_OPTIONS,
  ButtonSet,
} from './ButtonSet'

const meta = {
  title: 'Blocks/ButtonSet',
  component: ButtonSet,
  argTypes: {
    size: {
      control: { type: 'select' },
      options: BUTTON_SET_SIZE_OPTIONS,
    },
    orientation: {
      control: { type: 'select' },
      options: BUTTON_SET_ORIENTATION_OPTIONS,
    },
  },
  args: {
    size: 'default',
    orientation: 'responsive',
  },
} satisfies Meta<typeof ButtonSet>

export default meta

type Story = StoryObj<typeof meta>

export const Responsive: Story = {
  render: (args) => (
    <ButtonSet {...args}>
      <Button>Primary</Button>
      <Button variant="secondary">Secondary</Button>
    </ButtonSet>
  ),
}

export const Horizontal: Story = {
  render: (args) => (
    <ButtonSet {...args} orientation="horizontal">
      <Button>Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="tertiary">Tertiary</Button>
    </ButtonSet>
  ),
}

export const Vertical: Story = {
  render: (args) => (
    <ButtonSet {...args} orientation="vertical">
      <Button>Primary</Button>
      <Button variant="secondary">Secondary</Button>
    </ButtonSet>
  ),
}

export const SizesTextOnly: Story = {
  render: (args) => (
    <div className="flex flex-col gap-4">
      <ButtonSet {...args} size="default">
        <Button>Default</Button>
        <Button variant="secondary">Secondary</Button>
      </ButtonSet>

      <ButtonSet {...args} size="sm">
        <Button>Small</Button>
        <Button variant="secondary">Secondary</Button>
      </ButtonSet>

      <ButtonSet {...args} size="xs">
        <Button>XS</Button>
        <Button variant="secondary">Secondary</Button>
      </ButtonSet>
    </div>
  ),
}

export const SizesWithIcon: Story = {
  render: (args) => (
    <div className="flex flex-col gap-4">
      <ButtonSet {...args} size="default">
        <Button>
          <SvgAdd />
          Default
        </Button>
        <Button variant="secondary">
          <SvgAdd />
          Secondary
        </Button>
      </ButtonSet>

      <ButtonSet {...args} size="sm">
        <Button>
          <SvgAdd />
          Small
        </Button>
        <Button variant="secondary">
          <SvgAdd />
          Secondary
        </Button>
      </ButtonSet>

      <ButtonSet {...args} size="xs">
        <Button>
          <SvgAdd />
          XS
        </Button>
        <Button variant="secondary">
          <SvgAdd />
          Secondary
        </Button>
      </ButtonSet>
    </div>
  ),
}