import * as React from 'react';
import { render, screen } from '@testing-library/react';
import UrgentRequest, {
  UrgentRequestProps,
} from './UrgentRequest';
import userEvent from '@testing-library/user-event';

const mockSetUrgent = jest.fn((urgen: boolean) => { });

describe('<UrgentRequest>', () => {
  it('renders the option to make a contact request urgent', () => {
    const { getByText, findAllByText } = render(
      <UrgentRequest urgent={urgent} setUrgent={ mockSetUrgent } />
    );
    // Folded urgent box has invisible content
    const urgentIntro = getByText(/CAUTION:/i);
    const urgentInput = screen.getByRole('input');
    const urgentSubmit = screen.getByRole('button');
    const urgentFold = getByText(/Urgent request\?/i);
    const noUrgentConfirmation = findAllByText(/Your request was marked urgent/i);
    
    expect(urgentIntro).not.toBeVisible();

    // Unfolfing the urgency form
    userEvent.click(urgentFold);
    expect(urgentIntro).toBeVisible();

    // Not urgent initially 
    
    expect(noUrgentConfirmation).toBe([]);
    
    // See expected elements
    expect(document.body.contains(urgentIntro));
    expect(urgentIntro).toHaveTextContent(/"URGENT"/)
    
    // Expected default values
    expect(urgentInput).toHaveValue("");
    expect(urgentSubmit).toBeDisabled();

    // Try typing something that doesn't change the urgent status
    userEvent.type(urgentInput, "NOT URGENT");
    expect(urgentInput).toHaveValue("NOT URGENT");
    expect(urgentSubmit).toBeDisabled();

    // Clear the input
    userEvent.clear(urgentInput);

    // Fill in URGENT to change the urgent status
    userEvent.type(urgentInput, "URGENT");
    // Can click submit now..
    expect(urgentSubmit).not.toBeDisabled();

    // Clicking it..
    userEvent.click(urgentSubmit);

    // Triggers a message sent up the hierarchy..
    expect(mockSetUrgent).toBeCalledWith(true);

    // Which changes the `urgent` prop passed down to it which changes the 
    // status to urgent.
    const urgentConfirmation = getByText(/Your request was marked urgent/i);
    expect(document.body.contains(urgentConfirmation));

    // The urgent form is gone
    expect(urgentSubmit).not.toBeVisible();
    expect(urgentInput).not.toBeVisible();

    // A new button apppears that allows the status to be not urgent again.
    const notUrgentSubmit = screen.getByRole('button');
    // Clicking it reverts everthing back to the original state.
    userEvent.click(notUrgentSubmit);
    expect(document.body.contains(urgentConfirmation)).not.toBeTruthy();
    expect(urgentInput).toBeVisible();
    expect(urgentInput).toHaveValue("");
    expect(urgentSubmit).toBeVisible();
    expect(notUrgentSubmit).not.toBeVisible();
  });
});