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

const imageSetFixtureA: ContentTree.ImageSet = {
  type: 'image-set' as const,
  id: 'http://api.ft.com/content/d779876b-f2f2-4598-b97f-32e0520951e4',
  picture: {
    layoutWidth: 'standard',
    imageType: 'graphic',
    alt: 'Column chart of 3-month returns if you bought at the peak of a rate-rise cycle, % showing Returns on perfect timing',
    caption:
      'Natalia Criado silver-plated-brass Artefacto serving fork and spoon, €520',
    credit: '',
    images: [
      {
        id: '5c55d90a-e102-4a1b-a34a-b3c4d400bfb7',
        width: 700,
        height: 360,
        format: 'standard-inline',
        url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd6c748xw2pzm8.cloudfront.net%2Fproduction%2Fd779876b-f2f2-4598-b97f-32e0520951e4.jpg?source=ft-app-api&fit=scale-down&quality=highest&width=700&dpr=1',
        sourceSet: [
          {
            dpr: 1,
            width: 700,
            url: 'https://www.ft.com/__origami/service/image/v2/images/raw/ftcms%3Ad779876b-f2f2-4598-b97f-32e0520951e4?source=ft-app-api&fit=scale-down&quality=highest&width=700&dpr=1',
          },
        ],
      },
      {
        id: '49a7a6e6-4be9-442f-8af4-9aec1d1bc442',
        width: 490,
        height: 880,
        format: 'mobile',
        url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd6c748xw2pzm8.cloudfront.net%2Fproduction%2Fd779876b-f2f2-4598-b97f-32e0520951e4.jpg?source=ft-app-api&fit=scale-down&quality=highest&width=700&dpr=1',
        sourceSet: [
          {
            dpr: 1,
            width: 490,
            url: 'https://www.ft.com/__origami/service/image/v2/images/raw/ftcms%3A49a7a6e6-4be9-442f-8af4-9aec1d1bc442?source=ft-app-api&fit=scale-down&quality=highest&width=490&dpr=1',
          },
        ],
      },
    ],
    fallbackImage: {
      id: '5c55d90a-e102-4a1b-a34a-b3c4d400bfb7',
      width: 200,
      height: 200,
      format: 'standard-inline',
      url: 'https://images.ft.com/v3/image/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2Fd779876b-f2f2-4598-b97f-32e0520951e4.jpg?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
    },
  },
}

const imageSetFixtureB: ContentTree.ImageSet = {
  type: 'image-set' as const,
  id: 'http://api.ft.com/content/10fd9d62-d1d8-467f-9fde-72e26bfee896',
  picture: {
    layoutWidth: 'standard',
    imageType: 'image',
    alt: 'Hors-d’Oeuvre silver Artifact Tea cutlery, £420 for four-piece set, oblist.com',
    caption:
      'Hors-d’Oeuvre silver Artifact Tea cutlery, £420 for four-piece set, oblist.com',
    credit: '',
    images: [
      {
        id: '10fd9d62-d1d8-467f-9fde-72e26bfee896',
        width: 700,
        height: 1600,
        format: 'standard-inline',
        url: 'https://images.ft.com/v3/image/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F10fd9d62-d1d8-467f-9fde-72e26bfee896.jpg.jpg?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
        sourceSet: [
          {
            dpr: 1,
            width: 700,
            url: 'https://images.ft.com/v3/image/raw/ftcms%3A10fd9d62-d1d8-467f-9fde-72e26bfee896?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
          },
        ],
      },
    ],
    fallbackImage: {
      id: '10fd9d62-d1d8-467f-9fde-72e26bfee896',
      width: 1151,
      height: 1600,
      format: 'standard-inline',
      url: 'https://images.ft.com/v3/image/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F10fd9d62-d1d8-467f-9fde-72e26bfee896.jpg.jpg?source=next-article&fit=scale-down&quality=highest&width=700&dpr=1',
    },
  },
}

const contentData = {
  type: 'image-pair' as const,
  children: [imageSetFixtureA, imageSetFixtureB] as [
    typeof imageSetFixtureA,
    typeof imageSetFixtureB
  ],
}

describe('ImagePair', () => {
  it('renders two ImageSet children correctly', () => {
    const imageSetA = <ImageSet content={imageSetFixtureA} />
    const imageSetB = <ImageSet content={imageSetFixtureB} />
    const { container } = render(
      <ImagePair content={contentData}>{[imageSetA, imageSetB]}</ImagePair>
    )
    expect(container).toMatchSnapshot()
  })

  it('renders null if children are missing or not length 2', () => {
    // Bypass type check for negative test
    const imageSetA = <ImageSet content={imageSetFixtureA} />
    const { container } = render(
      <ImagePair content={contentData}>{[imageSetA]}</ImagePair>
    )
    expect(container.firstChild).toBeNull()
  })
})