import React, { ComponentProps } from 'react'
import { render, screen } from '@testing-library/react'
import PartnerContentHeader from '.'

jest.mock('@financial-times/o3-tooltip/cjs', () => ({
  TooltipToggle: ({
    content,
    infoLabel,
  }: {
    content: string
    infoLabel: string
  }) => (
    <button data-testid="tooltip-toggle" aria-label={infoLabel}>
      {content}
    </button>
  ),
}))

describe('PartnerContentHeader', () => {
  const name = 'Acme Corp'
  const cases: Array<
    [
      string,
      ComponentProps<typeof PartnerContentHeader>['disclaimerType'],
      string
    ]
  > = [
    [
      'fallback',
      undefined,
      'This content was paid for by Acme Corp and produced in partnership with the Financial Times Commercial department',
    ],
    [
      'co-created-content',
      'co-created-content',
      'This content was paid for by Acme Corp and produced in partnership with the Financial Times Commercial department',
    ],
    [
      'client-supplied-content',
      'client-supplied-content',
      'This content was paid for and produced by Acme Corp',
    ],
    [
      'ft-studios-risky',
      'ft-studios-risky',
      'This advertisement has been produced by the Commercial department of the Financial Times on behalf of Acme Corp',
    ],
    [
      'auditor',
      'auditor',
      'This content was paid for and produced by Acme Corp with the Financial Times Commercial department',
    ],
  ]

  it.each(cases)(
    'renders the %s disclaimer string',
    (_, disclaimerType, expected) => {
      const { container } = render(
        <PartnerContentHeader name={name} disclaimerType={disclaimerType} />
      )

      const clientName = container.querySelector(
        '.partner-content-header__client'
      )
      const tooltipToggle = screen.getByTestId('tooltip-toggle')

      expect(clientName?.textContent).toBe(name)
      expect(tooltipToggle.textContent).toBe(expected)
    }
  )
})