import type { Meta, StoryObj } from '@storybook/react-vite'

import { ToggleGroup, ToggleGroupItem } from './toggle-group'
import { FontBoldIcon, FontItalicIcon, UnderlineIcon } from '@radix-ui/react-icons'

const meta = {
  title: 'Toggle Group',
  component: ToggleGroup,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      options: ['default', 'outline'],
      control: { type: 'radio' },
    },
    size: {
      options: ['default', 'sm', 'lg'],
      control: { type: 'radio' },
    },
    type: {
      options: ['single', 'multiple'],
      control: { type: 'radio' },
    },
    disabled: {
      control: { type: 'boolean' },
    },
  },
  render: (args) => (
    <div className="flex items-center justify-center">
      <ToggleGroup disabled={args.disabled} type={args.type} variant={args.variant} size={args.size}>
        <ToggleGroupItem value="bold" aria-label="Toggle bold">
          <FontBoldIcon className="h-4 w-4" />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Toggle italic">
          <FontItalicIcon className="h-4 w-4" />
        </ToggleGroupItem>
        <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
          <UnderlineIcon className="h-4 w-4" />
        </ToggleGroupItem>
      </ToggleGroup>
    </div>
  ),
} satisfies Meta<typeof ToggleGroup>

export default meta

// STORIES ---------------------------------------------------------------------
export const Default: StoryObj<typeof meta> = {
  args: {
    variant: 'default',
    size: 'default',
    type: 'multiple',
  },
}

export const SingleSelection: StoryObj<typeof meta> = {
  args: {
    variant: 'default',
    size: 'default',
    type: 'single',
  },
}

export const VariantOutline: StoryObj<typeof meta> = {
  args: {
    variant: 'outline',
    size: 'default',
    type: 'multiple',
  },
}

export const SizeLarge: StoryObj<typeof meta> = {
  args: {
    variant: 'outline',
    size: 'lg',
    type: 'multiple',
  },
}

export const SizeSmall: StoryObj<typeof meta> = {
  args: {
    variant: 'outline',
    size: 'sm',
    type: 'multiple',
  },
}
