import React from 'react';
import { DateField } from './index';
import { renderWithTheme } from '@lendi-ui/test-utils';

describe('DateField', () => {
  it(`should render legend text when using label prop`, () => {
    const screen = renderWithTheme(<DateField label="Date of birth" variant="daymonthyear" />);

    expect(screen.getByRole('group', { name: /date of birth/i })).toBeInTheDocument();
  });

  /**
   * The most accessible way to surface help message is to throw it in the legend,
   * we visually hide the text to maintain the current design
   */
  it(`help text should be visually hidden in legend`, () => {
    const screen = renderWithTheme(
      <DateField label="Date of birth" helpText="For example, 27 3 2007" variant="daymonthyear" />
    );

    expect(screen.getByRole('group', { name: /For example, 27 3 2007/i })).toBeInTheDocument();

    const helpText = screen.getAllByText(/for example, 27 3 2007/i);
    expect(helpText[0].classList.contains('sr-only')).toBe(true);
  });

  /**
   * To maintain the current design we need to help text to be visually show but hidden from screen readers
   */
  it(`help text should show visually but be hidden from screen readers`, () => {
    const screen = renderWithTheme(
      <DateField label="Date of birth" helpText="For example, 27 3 2007" variant="daymonthyear" />
    );

    const helpText = screen.getAllByText(/for example, 27 3 2007/i);

    expect(helpText[1].parentElement?.tagName.toLowerCase()).toBe('div');
    expect(helpText[1].parentElement).toHaveAttribute('aria-hidden');
    expect(helpText[1].parentElement).toBeVisible();
  });

  it(`error text should not be in the document if "validationState" is not set to "invalid"`, () => {
    const screen = renderWithTheme(
      <DateField label="Date of birth" errorText="The date you entered must be in the past" variant="daymonthyear" />
    );

    expect(screen.queryByRole('group', { name: /the date you entered must be in the past/i })).not.toBeInTheDocument();

    const errorText = screen.queryAllByText(/the date you entered must be in the past/i);
    expect(errorText).toHaveLength(0);
  });

  /**
   * The most accessible way to surface error message is to throw it in the legend,
   * we visually hide the text to maintain the current design
   */
  it(`error text should be visually hidden in legend`, () => {
    const screen = renderWithTheme(
      <DateField
        label="Date of birth"
        errorText="The date you entered must be in the past"
        validationState="invalid"
        variant="daymonthyear"
      />
    );

    expect(screen.getByRole('group', { name: /the date you entered must be in the past/i })).toBeInTheDocument();

    const errorText = screen.getAllByText(/the date you entered must be in the past/i);
    expect(errorText[0].classList.contains('sr-only')).toBe(true);
  });

  /**
   * To maintain the current design we need to help text to be visually show but hidden from screen readers
   */
  it(`error text should show visually but be hidden from screen readers`, () => {
    const screen = renderWithTheme(
      <DateField
        label="Date of birth"
        errorText="The date you entered must be in the past"
        validationState="invalid"
        variant="daymonthyear"
      />
    );

    const errorText = screen.getAllByText(/the date you entered must be in the past/i);

    expect(errorText[1].closest('div[aria-hidden="true"]')).toHaveAttribute('aria-hidden');
    expect(errorText[1].closest('div[aria-hidden="true"]')).toBeVisible();
  });

  /**
   * @todo write more tests
   */
});