import React from 'react'
import { render } from '@testing-library/react'
import type { ContentTree } from '@financial-times/content-tree'
import { CarouselCardHeadingLevelContext } from '../../Carousel'
import CarouselCard from '../index'

const imageSetChild = {
  type: 'image-set',
  id: 'https://api.ft.com/content/fb0ab23d-46f4-4a93-ad68-8a26d5dac702',
  fragmentIdentifier: 'carousel-card-city',
} satisfies ContentTree.transit.ImageSet

const carouselCardChildren = [
  imageSetChild,
] satisfies ContentTree.transit.CarouselCard['children']

describe('CarouselCard', () => {
  it('renders with required fields and additional info', () => {
    const { container } = render(
      <CarouselCard
        content={{
          type: 'carousel-card',
          id: 'card-1',
          title: 'Start with the city',
          children: carouselCardChildren,
          copy: 'Use a city guide before booking.',
          additionalInfo: 'Best for short breaks',
        }}
      >
        <figure>
          <img alt="" src="https://www.ft.com/image.jpg" />
        </figure>
      </CarouselCard>
    )

    expect(container.firstChild).toMatchSnapshot()
  })

  it('renders without additional info', () => {
    const { container } = render(
      <CarouselCard
        content={{
          type: 'carousel-card',
          id: 'card-1',
          title: 'Start with the city',
          children: carouselCardChildren,
          copy: 'Use a city guide before booking.',
        }}
      >
        <figure>
          <img alt="" src="https://www.ft.com/image.jpg" />
        </figure>
      </CarouselCard>
    )

    expect(container.firstChild).toMatchSnapshot()
  })

  it('renders an h2 title when the heading level context is 2', () => {
    const { container } = render(
      <CarouselCardHeadingLevelContext.Provider value={2}>
        <CarouselCard
          content={{
            type: 'carousel-card',
            id: 'card-1',
            title: 'Start with the city',
            children: carouselCardChildren,
            copy: 'Use a city guide before booking.',
          }}
        >
          <figure>
            <img alt="" src="https://www.ft.com/image.jpg" />
          </figure>
        </CarouselCard>
      </CarouselCardHeadingLevelContext.Provider>
    )

    expect(container.firstChild).toMatchSnapshot()
  })

  it('renders an h3 title when the heading level context is 3', () => {
    const { container } = render(
      <CarouselCardHeadingLevelContext.Provider value={3}>
        <CarouselCard
          content={{
            type: 'carousel-card',
            id: 'card-1',
            title: 'Start with the city',
            children: carouselCardChildren,
            copy: 'Use a city guide before booking.',
          }}
        >
          <figure>
            <img alt="" src="https://www.ft.com/image.jpg" />
          </figure>
        </CarouselCard>
      </CarouselCardHeadingLevelContext.Provider>
    )

    expect(container.firstChild).toMatchSnapshot()
  })
})