import { render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { Slot, SlotFillProvider } from '@wordpress/components'
import { createReduxStore, register } from '@wordpress/data'
import { defaultI18n } from '@wordpress/i18n'
import { PluginArea } from '@wordpress/plugins'

const TASK_ID = 'configure-posten-bring-checkout'
const ONBOARDING_STORE_NAME = 'wc/admin/onboarding'

const actionTask = jest.fn()

jest.mock(
  '@woocommerce/data',
  () => ({ ONBOARDING_STORE_NAME: 'wc/admin/onboarding' }),
  { virtual: true }
)

jest.mock('../../admin/Settings', () => ({
  __esModule: true,
  default: ({ onTaskComplete }: { onTaskComplete?: () => void }) => (
    <button onClick={onTaskComplete}>Posten Bring Checkout settings</button>
  ),
}))

const DefaultTaskItem = () => <span>Default task item</span>

// Mirrors how WooCommerce renders the task list: plugins registered in the
// woocommerce-tasks scope fill slots named after the task id
const renderWooCommerceTaskList = () =>
  render(
    <SlotFillProvider>
      <div data-testid="task-content">
        <Slot name={`woocommerce_onboarding_task_${TASK_ID}`} />
      </div>
      <div data-testid="task-list-item">
        <Slot
          name={`woocommerce_onboarding_task_list_item_${TASK_ID}`}
          fillProps={{ defaultTaskItem: DefaultTaskItem }}
        />
      </div>
      <PluginArea scope="woocommerce-tasks" />
    </SlotFillProvider>
  )

describe('Onboarding task', () => {
  beforeAll(() => {
    register(
      createReduxStore(ONBOARDING_STORE_NAME, {
        reducer: (state = {}) => state,
        actions: {
          actionTask: (id: string) => {
            actionTask(id)
            return { type: 'ACTION_TASK' }
          },
        },
      })
    )
    ;(global as unknown as { wp: unknown }).wp = { i18n: defaultI18n }
    require('../index')
  })

  beforeEach(() => {
    jest.clearAllMocks()
  })

  it('shows the settings as the content of the task', () => {
    renderWooCommerceTaskList()

    expect(screen.getByTestId('task-content')).toHaveTextContent(
      'Posten Bring Checkout settings'
    )
  })

  it('marks the task as actioned when the settings are completed', async () => {
    renderWooCommerceTaskList()

    await userEvent.click(
      screen.getByRole('button', { name: 'Posten Bring Checkout settings' })
    )

    expect(actionTask).toHaveBeenCalledWith(TASK_ID)
  })

  it('shows the default task list item inside the custom wrapper', () => {
    renderWooCommerceTaskList()

    const taskListItem = screen.getByTestId('task-list-item')
    expect(
      taskListItem.querySelector('.woocommerce-custom-tasklist-item')
    ).toHaveTextContent('Default task item')
  })
})