import React from 'react';
import { waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import DatePicker from '../DatePicker';

describe('rendering', () => {
  it('renders date input and calendar', async () => {
    const { getByDisplayValue, getByText, getByTestId } = renderWithTheme(
      <DatePicker value="19/02/2021" />
    );

    await waitFor(() => {
      expect(getByDisplayValue('19/02/2021')).toBeInTheDocument();
    });

    userEvent.click(getByDisplayValue('19/02/2021'));

    const monthSelect = getByTestId('month-select');
    const yearSelect = getByTestId('year-select');

    await waitFor(() => {
      expect(monthSelect).toSelectItem('Feb');
      expect(yearSelect).toSelectItem('2021');
      expect(getByText('19')).toBeVisible();
    });
  });

  it('renders date input with correct format', async () => {
    const { getByDisplayValue } = renderWithTheme(
      <DatePicker value="2021/02/19" format="yyyy/MM/dd" />
    );

    await waitFor(() => {
      expect(getByDisplayValue('2021/02/19')).toBeInTheDocument();
    });
  });
});

describe('interaction', () => {
  it('allows to blur', async () => {
    const onBlur = jest.fn();

    const { getByDisplayValue } = renderWithTheme(
      <DatePicker value="19/02/2021" onBlur={onBlur} />
    );

    userEvent.click(getByDisplayValue('19/02/2021'));
    userEvent.click(document.body);
    expect(onBlur).toHaveBeenCalledTimes(1);
  });
  it('allows to pick a date', async () => {
    const onChange = jest.fn();
    const { getByDisplayValue, getByText } = renderWithTheme(
      <DatePicker value="19/02/2021" onChange={onChange} />
    );

    userEvent.click(getByDisplayValue('19/02/2021'));
    userEvent.click(getByText('25'));

    await waitFor(() => {
      expect(onChange).toHaveBeenCalledTimes(1);
      expect(onChange).toHaveBeenCalledWith('25/02/2021');
    });
  });

  it('does not allow to pick a date out of range', async () => {
    const onChange = jest.fn();
    const { getByDisplayValue, getByText } = renderWithTheme(
      <DatePicker
        value="19/02/2021"
        onChange={onChange}
        minDate={new Date(2021, 2, 4)}
        maxDate={new Date(2022, 2, 26)}
      />
    );

    userEvent.click(getByDisplayValue('19/02/2021'));
    await waitFor(() => {
      expect(() => userEvent.click(getByText('28'))).toThrowError(
        'unable to click element as it has or inherits pointer-events set to "none".'
      );
    });
  });

  it('allows to pick a date by changing input value', async () => {
    const onChange = jest.fn();
    const { getByPlaceholderText } = renderWithTheme(
      <DatePicker onChange={onChange} placeholder="Birthday" />
    );

    userEvent.type(getByPlaceholderText('Birthday'), '19/02/2021');

    await waitFor(() => {
      expect(onChange).toHaveBeenCalledTimes(10);
      expect(onChange).toHaveBeenCalledWith('1');
      expect(onChange).toHaveBeenCalledWith('9');
      expect(onChange).toHaveBeenCalledWith('/');
    });
  });

  it('shows current date when input value is invalid date', async () => {
    jest.useFakeTimers('modern');
    jest.setSystemTime(new Date(2022, 1, 19));

    const { getByText, getByDisplayValue, getByTestId } = renderWithTheme(
      <DatePicker value="111/4/34" />
    );

    userEvent.click(getByDisplayValue('111/4/34'));

    const monthSelect = getByTestId('month-select');
    const yearSelect = getByTestId('year-select');

    await waitFor(() => {
      expect(monthSelect).toSelectItem('Feb');
      expect(yearSelect).toSelectItem('2022');
      expect(getByText('19')).toBeInTheDocument();
    });
  });

  it('does not allow to edit disabled DatePicker', async () => {
    const onChange = jest.fn();
    const { queryByText, getByDisplayValue } = renderWithTheme(
      <DatePicker value="19/02/2021" onChange={onChange} disabled />
    );

    userEvent.click(getByDisplayValue('19/02/2021'));

    await waitFor(() => {
      expect(queryByText('Su')).not.toBeInTheDocument();
    });

    userEvent.type(getByDisplayValue('19/02/2021'), '15/02/2021');

    await waitFor(() => {
      expect(onChange).not.toHaveBeenCalled();
    });
  });
});