import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'

import CpRadio from '@/components/CpRadio.vue'

const radioColors = ['accent', 'blue'] as const

const meta = {
  title: 'Atoms/CpRadio',
  component: CpRadio,
  argTypes: {
    modelValue: {
      control: 'text',
      description: 'The selected radio value',
    },
    options: {
      control: 'object',
      description: 'Array of radio options',
    },
    groupName: {
      control: 'text',
      description: 'Name attribute for radio group',
    },
    color: {
      control: 'select',
      options: radioColors,
      description: 'Color variant of the radio',
    },
    autofocus: {
      control: 'boolean',
      description: 'Whether to autofocus the first radio',
    },
  },
} satisfies Meta<typeof CpRadio>

export default meta
type Story = StoryObj<typeof meta>

const sampleOptions = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
]

const wrappedRender = (args: { modelValue?: string }) => ({
  components: { CpRadio },
  setup() {
    const value = ref(args.modelValue)
    return { args, value }
  },
  template: `
    <div style="min-width: 400px; padding: 20px;">
      <CpRadio v-model="value" v-bind="args" />
    </div>
  `,
})

/**
 * Default radio group with three plain options. Use the controls to
 * experiment with each prop in isolation.
 */
export const Default: Story = {
  args: {
    modelValue: 'option1',
    options: sampleOptions,
    groupName: 'radio-group',
    color: 'accent',
    autofocus: false,
  },
  render: wrappedRender,
}

/**
 * Each option can provide a secondary `description` displayed under the
 * label — great for presenting plans or multi-line choices.
 */
export const WithDescriptions: Story = {
  args: {
    ...Default.args,
    options: [
      { value: 'option1', label: 'Basic Plan', description: 'Perfect for individuals' },
      { value: 'option2', label: 'Pro Plan', description: 'Great for small teams' },
      { value: 'option3', label: 'Enterprise Plan', description: 'For large organizations' },
    ],
  },
}

/**
 * Append a right-aligned piece of information through `additionalData`
 * (e.g. price, unit, shortcut).
 */
export const WithAdditionalData: Story = {
  args: {
    ...Default.args,
    options: [
      { value: 'option1', label: 'Monthly', additionalData: '$10/mo' },
      { value: 'option2', label: 'Yearly', additionalData: '$100/yr' },
      { value: 'option3', label: 'Lifetime', additionalData: '$500' },
    ],
  },
}

/**
 * Disable individual options using their `disabled` flag — the value stays
 * selectable on other rows.
 */
export const WithDisabledOption: Story = {
  args: {
    ...Default.args,
    options: [
      { value: 'option1', label: 'Option 1' },
      { value: 'option2', label: 'Option 2', disabled: true },
      { value: 'option3', label: 'Option 3' },
    ],
  },
  render: wrappedRender,
}

/**
 * A disabled option can still be the current value — useful when the user
 * cannot change a pre-selected choice.
 */
export const CheckedDisabled: Story = {
  args: {
    ...Default.args,
    options: [
      { value: 'option1', label: 'Option 1', disabled: true },
      { value: 'option2', label: 'Option 2' },
      { value: 'option3', label: 'Option 3' },
    ],
    modelValue: 'option1',
  },
  render: wrappedRender,
}

/**
 * Combine `description` and `additionalData` for rich option rows.
 */
export const ComplexOptions: Story = {
  args: {
    ...Default.args,
    options: [
      {
        value: 'option1',
        label: 'Basic Plan',
        description: 'Perfect for individuals',
        additionalData: '$10/mo',
      },
      {
        value: 'option2',
        label: 'Pro Plan',
        description: 'Great for small teams',
        additionalData: '$30/mo',
      },
      {
        value: 'option3',
        label: 'Enterprise Plan',
        description: 'For large organizations',
        additionalData: '$100/mo',
      },
    ],
  },
}