import { render, screen, waitFor, within } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import React from 'react'
import Tips from '../Tips'

jest.mock(
  '@woocommerce/settings',
  () => ({ getAdminLink: (path: string) => `/wp-admin/${path}` }),
  { virtual: true }
)

const PLUGIN_PAGE =
  '/wp-admin/admin.php?page=wc-admin&path=/posten-bring-checkout'

const readMoreAbout = async (title: string) => {
  const card = screen.getByRole('heading', { name: title }).closest('li')
  await userEvent.click(
    within(card as HTMLElement).getByRole('button', { name: /Read more/ })
  )
  return screen.getByRole('dialog', {
    name: new RegExp(title.replace(/[()]/g, '\\$&')),
  })
}

const setUpLink = (dialog: HTMLElement) =>
  within(dialog).getByRole('link', {
    name: /Set it up now|Add HS codes|Open the checkout page/,
  })

describe('Tips', () => {
  beforeEach(() => {
    ;(window as any).tipsDetails = {
      checkoutBlockActive: false,
      checkoutPageEditLink: '/wp-admin/post.php?post=7&action=edit',
    }
  })

  afterEach(() => {
    delete (window as any).tipsDetails
  })

  it('shouldShowFourTipsUnderOneHeading', () => {
    render(<Tips />)

    expect(
      screen.getByRole('heading', { name: 'Did you know?' })
    ).toBeInTheDocument()
    expect(screen.getAllByRole('button', { name: /Read more/ })).toHaveLength(4)
    ;[
      'Automatic label printing',
      'Self-service returns',
      'Orders to Northern Norway (NVIT)',
      'Block checkout',
    ].forEach(title =>
      expect(screen.getByRole('heading', { name: title })).toBeInTheDocument()
    )
  })

  it('shouldOfferTheQuietTipsAsLinksNotButtons', () => {
    render(<Tips layout="quiet" />)

    screen
      .getAllByRole('button', { name: /Read more/ })
      .forEach(readMore => expect(readMore).toHaveClass('is-link'))
  })

  it('shouldLinkToAllUpdatesInTheChangelog', () => {
    render(<Tips />)

    const updates = screen.getByRole('link', { name: /See all updates/ })
    expect(updates).toHaveAttribute('href', `${PLUGIN_PAGE}/changelog`)
    expect(updates).toHaveAttribute('target', '_blank')
    expect(updates).toHaveAccessibleName(/opens in a new tab/)
  })

  it('shouldExplainTheTipInAModal', async () => {
    render(<Tips />)

    const dialog = await readMoreAbout('Self-service returns')

    expect(
      within(dialog).getByRole('heading', {
        name: 'Let customers start their own returns',
      })
    ).toBeInTheDocument()
  })

  it.each([
    ['Automatic label printing', `${PLUGIN_PAGE}/settings&open=printing`],
    ['Self-service returns', `${PLUGIN_PAGE}/settings&open=returns`],
    [
      'Orders to Northern Norway (NVIT)',
      '/wp-admin/edit.php?post_type=product',
    ],
    ['Block checkout', '/wp-admin/post.php?post=7&action=edit'],
  ])('shouldSetUp %s in a new window', async (title, href) => {
    render(<Tips />)

    const link = setUpLink(await readMoreAbout(title))

    expect(link).toHaveAttribute('href', href)
    expect(link).toHaveAttribute('target', '_blank')
    expect(link).toHaveAccessibleName(/opens in a new window/)
  })

  it('shouldOpenTheFaqOnTheTopic', async () => {
    render(<Tips />)

    const dialog = await readMoreAbout('Self-service returns')

    expect(
      within(dialog).getByRole('link', {
        name: /Questions and answers about returns/,
      })
    ).toHaveAttribute('href', `${PLUGIN_PAGE}/faq&q=Returns`)
  })

  it('shouldTellWhenTheCheckoutAlreadyUsesBlocks', async () => {
    ;(window as any).tipsDetails.checkoutBlockActive = true
    render(<Tips />)

    const dialog = await readMoreAbout('Block checkout')

    expect(
      within(dialog).getByText('Your checkout already uses blocks.')
    ).toBeInTheDocument()
    expect(
      within(dialog).queryByRole('heading', { name: 'How to switch' })
    ).not.toBeInTheDocument()
  })

  it('shouldTellWhenTheCheckoutIsClassic', async () => {
    render(<Tips />)

    const dialog = await readMoreAbout('Block checkout')

    expect(
      within(dialog).getByText(/Your checkout uses the classic checkout/)
    ).toBeInTheDocument()
    expect(
      within(dialog).getByRole('heading', { name: 'How to switch' })
    ).toBeInTheDocument()
  })

  it('shouldLeaveOutTheCheckoutLinkWhenThereIsNoPageToEdit', async () => {
    ;(window as any).tipsDetails.checkoutPageEditLink = ''
    render(<Tips />)

    const dialog = await readMoreAbout('Block checkout')

    expect(
      within(dialog).queryByRole('link', { name: /Open the checkout page/ })
    ).not.toBeInTheDocument()
  })

  it('shouldOpenUsefulLinksInANewTab', async () => {
    render(<Tips />)

    const dialog = await readMoreAbout('Orders to Northern Norway (NVIT)')

    ;[
      /Questions and answers about customs/,
      /Norwegian goods in transit/,
    ].forEach(name =>
      expect(within(dialog).getByRole('link', { name })).toHaveAccessibleName(
        /opens in a new tab/
      )
    )
    expect(
      within(dialog).getByRole('link', { name: 'Contact us' })
    ).toHaveAttribute('href', 'mailto:checkout.implementering@posten.no')
  })

  it('shouldCloseTheModal', async () => {
    render(<Tips />)

    await readMoreAbout('Automatic label printing')
    await userEvent.click(screen.getByRole('button', { name: 'Close' }))

    await waitFor(() =>
      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
    )
  })
})