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

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

import FormLikertSlider from './form';
import { type LikertSliderProps } from './types';
import LikertSlider from '.';

const meta: Meta<typeof LikertSlider> = {
  component: LikertSlider,
  title: 'Composed Components/Inputs/LikertSlider',
  tags: ['autodocs'],
  argTypes: {
    min: {
      control: { type: 'number' },
      description: 'Minimum value of the slider (inclusive)',
      defaultValue: 1,
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '1' },
      },
    },
    max: {
      control: { type: 'number' },
      description: 'Maximum value of the slider (inclusive)',
      defaultValue: 10,
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '10' },
      },
    },
    value: {
      control: { type: 'object' },
      description:
        'Current value of the slider (number or [number, number] for range). Range means it has a neutral value in between.',
      table: {
        type: { summary: 'number | [number, number]' },
      },
    },
    onChange: {
      action: 'changed',
      description: 'Callback fired when the value changes',
      table: {
        type: { summary: '(event, value, activeThumb) => void' },
      },
    },
    invert: {
      control: { type: 'boolean' },
      description: 'Invert positive and negative positions',
      defaultValue: false,
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    disabled: {
      control: { type: 'boolean' },
      description: 'Whether the slider is disabled',
      defaultValue: false,
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
  },
  render: args => (
    <Stack sx={{ width: 520, alignItems: 'center', margin: '0 auto' }}>
      <LikertSlider {...args} />
    </Stack>
  ),
};

export default meta;

type Story = StoryObj<typeof LikertSlider>;

export const Default: Story = {
  args: {},
  render: args => {
    const [value, setValue] = useState<LikertSliderProps['value']>([4, 6]);
    return (
      <Stack sx={{ width: 520, alignItems: 'center', margin: '0 auto' }}>
        <LikertSlider
          {...args}
          value={value}
          onChange={(_event, nextValue) => setValue(nextValue)}
        />
      </Stack>
    );
  },
};

export const SingleScale: Story = {
  render: args => {
    const [value, setValue] = useState<LikertSliderProps['value']>(5);
    return (
      <Stack sx={{ width: 520, alignItems: 'center', margin: '0 auto' }}>
        <LikertSlider
          {...args}
          value={value}
          onChange={(_event, nextValue) => setValue(nextValue)}
        />
      </Stack>
    );
  },
};

export const FiveScale: Story = {
  args: {
    min: 1,
    max: 5,
    value: 3,
  },
};

export const BinaryScale: Story = {
  args: {
    min: 1,
    max: 2,
    value: 1,
  },
};

export const FormStory: Story = {
  render: args => {
    const methods = useForm({
      defaultValues: {
        likert: [4, 6],
      },
    });

    const onSubmit = (data: { likert: LikertSliderProps['value'] }) => {
      alert(JSON.stringify(data, null, 2));
    };

    return (
      <FormProvider {...methods}>
        <form onSubmit={methods.handleSubmit(onSubmit)}>
          <Stack
            sx={{ width: 520, alignItems: 'center', margin: '0 auto', gap: 2 }}
          >
            <FormLikertSlider
              name="likert"
              {...args}
            />
            <Button type="submit">Submit</Button>
          </Stack>
        </form>
      </FormProvider>
    );
  },
};