/* eslint-disable no-console */
import React from 'react'
import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'

import DatePicker from './_date_picker'
import { getTimezoneText } from './plugins/timeSelect'



jest.setSystemTime(new Date('01/01/2020'));
const DEFAULT_DATE = new Date()


describe('DatePicker Kit', () => {
  beforeEach(() => {
    jest.spyOn(console, 'error').mockImplementation(() => { });
  });

  test('renders DatePicker input field', () => {
    const testId = 'datepicker-kit'
    render(
      <DatePicker
          data={{ testid: testId }}
          defaultDate={DEFAULT_DATE}
          pickerId="date-picker"
      />
    )

    const kit = screen.getByTestId(testId)
    expect(kit).toHaveClass('pb_date_picker_kit')
  })

  test('shows DatePicker date format m/d/Y', async () => {
    const testId = 'datepicker-date'
    render(
      <DatePicker
          data={{ testid: testId }}
          defaultDate={DEFAULT_DATE}
          format="m/d/Y"
          pickerId="date-picker-date"
      />
    )

    const kit = screen.getByTestId(testId)


    const input = within(kit).getByPlaceholderText('Select Date')
    expect(input).toBeInTheDocument()

    await waitFor(() => {
      expect(input).toHaveValue('01/01/2020')
    })
  })

  test('shows DatePicker time caption text', async () => {
    const testId = 'datepicker-time-caption'
    render(
      <DatePicker
          data={{ testid: testId }}
          defaultDate={DEFAULT_DATE}
          enableTime
          pickerId="date-picker-time-caption"
      />
    )

    const kit = screen.getByTestId(testId)
    const input = within(kit).getByPlaceholderText('Select Date')

    fireEvent(
      input,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
      }),
    )
    await waitFor(() => {
      const caption = within(kit).getByText('Select Time')
      expect(caption).toBeInTheDocument()
    })
  })

  test('shows DatePicker timezone text', async () => {
    const testId = 'datepicker-timezone'
    render(
      <DatePicker
          data={{ testid: testId }}
          defaultDate={DEFAULT_DATE}
          enableTime
          pickerId="date-picker-timezone"
          showTimezone
      />
    )

    const kit = screen.getByTestId(testId)
    const input = within(kit).getByPlaceholderText('Select Date')
    const defaultTimezoneText = getTimezoneText(DEFAULT_DATE)

    fireEvent(
      input,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
      }),
    )
    await waitFor(() => {
      const timezoneText = within(kit).getByText(defaultTimezoneText)
      expect(timezoneText).toBeInTheDocument()
    })
  })

  // test('shows DatePicker meridiem toggle', async () => {
  //   const testId = 'datepicker-meridiem'
  //   render(
  //     <DatePicker
  //         data={{ testid: testId }}
  //         defaultDate={DEFAULT_DATE}
  //         enableTime
  //         pickerId="date-picker-meridiem"
  //     />
  //   )

  //   const kit = screen.getByTestId(testId)
  //   const input = within(kit).getByPlaceholderText('Select Date')

  //   fireEvent(
  //     input,
  //     new MouseEvent('click', {
  //       bubbles: true,
  //       cancelable: true,
  //     }),
  //   )
  //   const meridiemToggleAM = within(kit).getByLabelText('AM')
  //   const meridiemTogglePM = within(kit).getByLabelText('PM')
  //   await waitFor(() => {
  //     expect(meridiemToggleAM).toBeInTheDocument()
  //     expect(meridiemTogglePM).toBeInTheDocument()
  //   })

  //   fireEvent(
  //     meridiemToggleAM,
  //     new MouseEvent('click', {
  //       bubbles: true,
  //       cancelable: true,
  //     }),
  //   )
  //   await waitFor(() => {
  //     expect(input).toHaveValue('01/01/2020 at 12:00 AM')
  //   })

  //   fireEvent(
  //     meridiemTogglePM,
  //     new MouseEvent('click', {
  //       bubbles: true,
  //       cancelable: true,
  //     }),
  //   )
  //   await waitFor(() => {
  //     expect(input).toHaveValue('01/01/2020 at 12:00 PM')
  //   })
  // })
})