import { FormProvider, useForm } from 'react-hook-form';

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

import FormRadioInput from './form';

const OPTIONS = [
  {
    value: 'opcion-1',
    label: 'Opción 1',
  },
  {
    value: 'opcion-2',
    label: 'Opción 2',
  },
  {
    value: 'opcion-3',
    label: 'Opción 3 (disabled)',
    disabled: true,
  },
];

const INPUT_PROPS = {
  label: 'Label',
  options: OPTIONS,
};

const meta: Meta<typeof FormRadioInput> = {
  title: 'Composed Components/Inputs/FormRadioInput',
  component: FormRadioInput,
  tags: ['autodocs'],
  args: {
    name: 'selection',
    inputProps: INPUT_PROPS,
  },
  render: props => {
    const form = useForm({
      defaultValues: {
        selection: 'ninguna',
      },
    });

    return (
      <FormProvider {...form}>
        <FormRadioInput {...props} />
      </FormProvider>
    );
  },
};

export default meta;

type Story = StoryObj<typeof FormRadioInput>;

export const Default: Story = {};

export const Disabled: Story = {
  args: {
    inputProps: {
      ...INPUT_PROPS,
      disabled: true,
    },
  },
};