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

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

import FormInputSelect from './form';
import InputSelect from '.';

const options = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
];

const meta: Meta<typeof InputSelect> = {
  component: InputSelect,
  title: 'Design System/Inputs/Select',
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    placeholder: { control: 'text' },
    helperText: { control: 'text' },
    errorText: { control: 'text' },
    error: { control: 'boolean' },
    success: { control: 'boolean' },
    disabled: { control: 'boolean' },
    fullWidth: { control: 'boolean' },
    options: { control: false },
    onChange: { control: false },
    renderOption: { control: false },
    sx: { control: false },
  },
  parameters: {
    docs: {
      description: {
        component:
          '⚠️ **DEPRECATED**: This component is not aligned with Hugo. Use the `Autocomplete` component instead.',
      },
    },
  },
  args: {
    options,
    placeholder: 'Placeholder',
    value: '',
    onChange: () => {},
  },
};

export default meta;

type Story = StoryObj<typeof InputSelect>;

export const NoLabel: Story = {
  args: {},
};

export const DefaultWithHelper: Story = {
  args: {
    label: 'Label',
    helperText: 'Helper',
    value: '',
  },
};

export const Disabled: Story = {
  args: {
    label: 'Label',
    value: '',
    disabled: true,
  },
};

export const Error: Story = {
  args: {
    label: 'Label',
    helperText: 'HelperText',
    errorText: 'Error text',
    value: options[0].value,
    error: true,
  },
};

const ColorBox = ({ color }: { color: string }) => {
  return (
    <Box
      sx={{ width: 20, height: 20, backgroundColor: color, borderRadius: 100 }}
    />
  );
};

export const ColorSelector: Story = {
  render: () => {
    const defaultInstanceColor = '#E4A0F7';
    const form = useForm({
      defaultValues: { color: defaultInstanceColor },
    });

    const colorsOptions = [
      { label: '[Color de tu comunidad]', value: defaultInstanceColor },
      { label: 'Azul claro', value: '#D6E4FF' },
      { label: 'Azul oscuro', value: '#1C3D7C' },
      { label: 'Beige claro', value: '#FFF4E5' },
      { label: 'Beige oscuro', value: '#8B4513' },
    ];

    return (
      <FormProvider {...form}>
        <FormInputSelect
          inputProps={{
            label: 'Color',
            options: colorsOptions,
            placeholder: 'Selecciona un color',
            helperText: value => `El color seleccionado es ${value}`,
            renderOption: option => (
              <Stack
                sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}
              >
                <ColorBox color={option.value as string} />
                {option.label}
              </Stack>
            ),
          }}
          name="color"
        />
      </FormProvider>
    );
  },
};

export const FormInputClassicStory: Story = {
  render: () => {
    const form = useForm({
      defaultValues: {
        myInput: '',
      },
    });
    return (
      <FormProvider {...form}>
        <FormInputSelect
          inputProps={{
            placeholder: 'Placeholder',
            label: 'Label',
            helperText: 'HelperText',
            options,
            allowClear: true,
          }}
          name="myInput"
        />
      </FormProvider>
    );
  },
};