import { Slot } from '@radix-ui/react-slot';
import { createFormHook, createFormHookContexts, useStore } from '@tanstack/react-form';

import * as React from 'react';

import { Label } from '#components/ui/label';
import { cn } from '#lib/utils';

const {
  fieldContext,
  formContext,
  useFieldContext: _useFieldContext,
  useFormContext,
} = createFormHookContexts();

const { useAppForm, withForm } = createFormHook({
  fieldContext,
  formContext,
  fieldComponents: {
    Label: FormLabel,
    Control: FormControl,
    Description: FormDescription,
    Message: FormMessage,
    MessageItems: FormMessageItems,
    Item: FormItem,
  },
  formComponents: {},
});

type FormItemContextValue = {
  id: string;
};

const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);

function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
  const id = React.useId();

  return (
    <FormItemContext.Provider value={{ id }}>
      <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
    </FormItemContext.Provider>
  );
}

const useFieldContext = () => {
  const { id } = React.useContext(FormItemContext);
  const { name, store, ...fieldContext } = _useFieldContext();

  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
  const errors = useStore(store, (state) => state.meta.errors);
  if (!fieldContext) {
    throw new Error('useFieldContext should be used within <FormItem>');
  }

  return {
    id,
    name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    errors,
    store,
    ...fieldContext,
  };
};

function FormLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
  const { formItemId, errors } = useFieldContext();

  return (
    <Label
      data-slot="form-label"
      data-error={!!errors.length}
      className={cn('data-[error=true]:text-destructive', className)}
      htmlFor={formItemId}
      {...props}
    />
  );
}

function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
  const { errors, formItemId, formDescriptionId, formMessageId } = useFieldContext();

  return (
    <Slot
      data-slot="form-control"
      id={formItemId}
      aria-describedby={
        !errors.length ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!errors.length}
      {...props}
    />
  );
}

function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
  const { formDescriptionId } = useFieldContext();

  return (
    <p
      data-slot="form-description"
      id={formDescriptionId}
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  );
}

function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
  const { errors, formMessageId } = useFieldContext();
  const body = errors.length
    ? // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
      String(errors.at(0)?.message ?? '')
    : props.children;
  if (!body) return null;

  return (
    <p
      data-slot="form-message"
      id={formMessageId}
      className={cn('text-destructive text-sm', className)}
      {...props}
    >
      {body}
    </p>
  );
}

function FormMessageItems({ className, ...props }: React.ComponentProps<'li'>) {
  const { errors, formMessageId } = useFieldContext();
  const messages = Array.from(
    new Set(
      errors
        .map((error) => {
          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
          return String(error.message ?? '');
        })
        .filter((x) => x.length > 0),
    ),
  );
  if (messages.length == 0) return null;

  return (
    <>
      {messages.map((message, index) => (
        <li
          key={index}
          data-slot="form-message-item"
          id={formMessageId}
          className={cn('text-destructive text-sm', className)}
          {...props}
        >
          <p>{message}</p>
        </li>
      ))}
    </>
  );
}

export { useAppForm, useFormContext, useFieldContext, withForm };