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

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

const task = (title: string) =>
  screen.getByRole('heading', { name: title }).closest('li') as HTMLElement

const openGuide = async (title: string) => {
  await userEvent.click(
    within(task(title)).getByRole('button', { name: `Show guide ${title}` })
  )
  return screen.getByRole('dialog')
}

describe('DailyUse', () => {
  it('lists booking shipping and printing labels', () => {
    render(<DailyUse canConfigure />)

    expect(
      within(task('Book shipping')).getByText(
        'Book shipping for one order, or for several orders at once.'
      )
    ).toBeInTheDocument()
    expect(
      within(task('Print labels')).getByText(
        'Print the labels of one order, or of several orders at once.'
      )
    ).toBeInTheDocument()
  })

  it('names each guide button after its task', () => {
    render(<DailyUse canConfigure />)

    expect(
      screen.getByRole('button', { name: 'Show guide Book shipping' })
    ).toBeInTheDocument()
    expect(
      screen.getByRole('button', { name: 'Show guide Print labels' })
    ).toBeInTheDocument()
  })

  it('keeps the guides closed until asked for', () => {
    render(<DailyUse canConfigure />)

    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
  })

  it('shows how to book shipping', async () => {
    render(<DailyUse canConfigure />)

    const guide = await openGuide('Book shipping')

    expect(
      within(guide).getByRole('heading', {
        name: 'Book shipping for one order',
      })
    ).toBeInTheDocument()
    expect(
      within(guide).getByRole('heading', {
        name: 'Book shipping for multiple orders',
      })
    ).toBeInTheDocument()
    expect(
      within(guide).getAllByText('Go to your orders page in the sidebar.')
    ).toHaveLength(2)
  })

  it('shows how to print labels', async () => {
    render(<DailyUse canConfigure />)

    const guide = await openGuide('Print labels')

    expect(
      within(guide).getByRole('heading', {
        name: 'Printing labels for one order',
      })
    ).toBeInTheDocument()
    expect(within(guide).getByText('Click "Print labels"')).toBeInTheDocument()
  })

  it('points to automatic label printing in the settings', () => {
    render(<DailyUse canConfigure />)

    expect(
      within(task('Print labels')).getByRole('link', {
        name: 'Turn on automatic label printing',
      })
    ).toHaveAttribute(
      'href',
      '/wp-admin/admin.php?page=wc-admin&path=/posten-bring-checkout/settings'
    )
  })

  it('leaves out the settings link for users who may not open the settings', () => {
    render(<DailyUse canConfigure={false} />)

    expect(
      within(task('Print labels')).queryByRole('link', {
        name: 'Turn on automatic label printing',
      })
    ).not.toBeInTheDocument()
  })
})