import { render, screen } from '@testing-library/react';
import user from '@testing-library/user-event';
import React from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
import * as Yup from 'yup';
import { yupResolver } from '..';

const schema = Yup.object({
  username: Yup.string().required(),
  password: Yup.string().required(),
});

type FormData = Yup.InferType<typeof schema>;

interface Props {
  onSubmit: SubmitHandler<FormData>;
}

function TestComponent({ onSubmit }: Props) {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm({
    resolver: yupResolver(schema), // Useful to check TypeScript regressions
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username')} />
      {errors.username && <span role="alert">{errors.username.message}</span>}

      <input {...register('password')} />
      {errors.password && <span role="alert">{errors.password.message}</span>}

      <button type="submit">submit</button>
    </form>
  );
}

test("form's validation with Yup and TypeScript's integration", async () => {
  const handleSubmit = vi.fn();
  render(<TestComponent onSubmit={handleSubmit} />);

  expect(screen.queryAllByRole('alert')).toHaveLength(0);

  await user.click(screen.getByText(/submit/i));

  expect(screen.getByText(/username is a required field/i)).toBeInTheDocument();
  expect(screen.getByText(/password is a required field/i)).toBeInTheDocument();
  expect(handleSubmit).not.toHaveBeenCalled();
});

const checkboxSchema = Yup.object({
  isTosAccepted: Yup.boolean().oneOf([true], 'must accept tos').required(),
});

test('errors.<field>.ref is the checkbox input element, not validation metadata (#630)', async () => {
  let latestErrors: ReturnType<typeof useForm>['formState']['errors'] = {};
  function Wrapper() {
    const methods = useForm({ resolver: yupResolver(checkboxSchema) });
    latestErrors = methods.formState.errors;

    return (
      <form onSubmit={methods.handleSubmit(() => {})}>
        <input type="checkbox" {...methods.register('isTosAccepted')} />
        <button type="submit">submit</button>
      </form>
    );
  }

  render(<Wrapper />);

  const checkbox = screen.getByRole('checkbox');
  await user.click(screen.getByText(/submit/i));

  expect(latestErrors.isTosAccepted?.ref).toBe(checkbox);
});