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

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

import FormRating from './form';
import Rating from '.';

const meta: Meta<typeof Rating> = {
  component: Rating,
  title: 'Design System/Rating',
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: 'select',
      options: ['small', 'medium', 'large'],
    },
  },
};

export default meta;

type Story = StoryObj<typeof Rating>;

export const RatingStory: Story = {
  args: {
    max: 5,
    disabled: false,
    readOnly: false,
    size: 'medium',
  },
};

export const FormRatingStory: Story = {
  render: () => {
    const form = useForm({
      defaultValues: {
        myRating: null,
      },
    });
    return (
      <FormProvider {...form}>
        <FormRating name="myRating" />
      </FormProvider>
    );
  },
};

export const FormRatingErrorStory: Story = {
  render: () => {
    const form = useForm({
      defaultValues: {
        myRating: null,
      },
      errors: {
        myRating: {
          message: 'This field is required',
          type: 'required',
        },
      },
    });

    return (
      <FormProvider {...form}>
        <FormRating name="myRating" />
      </FormProvider>
    );
  },
};