import '@testing-library/jest-dom';
import React from 'react';
import { fireEvent } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import { describe, expect, it } from 'vitest';
import { createMemoryRouter, RouterProvider } from 'react-router-dom';
import { renderWithProviders } from '../renderWithProviders';
import routes from '../routes';
import setupStore from '../store';
import { initialGuest } from '../mocks/handlers';
import { setGuest } from '../slices/auth/guestSlice';

describe('RSVP form', async () => {
  const memoryRouter = createMemoryRouter(routes, {
    initialEntries: ['/rsvp'],
  });
  it('can submit', async () => {
    const store = setupStore();
    store.dispatch(setGuest(initialGuest));
    const { getByLabelText, getByRole, findByText } = renderWithProviders(
      <RouterProvider router={memoryRouter} />,
      { store }
    );
    const user = userEvent.setup();

    fireEvent.click(getByLabelText(/accept/i), { target: { clicked: true } });
    await user.type(getByLabelText(/email/i), 'mhunteman@cox.net');
    fireEvent.click(getByRole('button', { name: 'RSVP' }));
    expect(await findByText(/RSVP updated/i)).toBeInTheDocument();
  });
});