// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import React from 'react'
import { render } from '@testing-library/react'
import MainImage from '.'

// Mock the dependent components
jest.mock('../Topper/MainImage', () => {
  return ({ topper }) => (
    <div data-testid="topper-main-image" data-topper={JSON.stringify(topper)} />
  )
})

jest.mock('../content-tree/ImageSet/index', () => ({
  __esModule: true,
  default: ({ content, isMainImage }) => (
    <div
      data-testid="image-set"
      data-content={JSON.stringify(content)}
      data-is-main-image={isMainImage}
    />
  ),
  FallbackImage: ({ content, isMainImage }) => (
    <div
      data-testid="fallback-image"
      data-content={JSON.stringify(content)}
      data-is-main-image={isMainImage}
    />
  ),
}))

describe('MainImage', () => {
  it.each(
    [
      { type: 'BasicTopper' },
      { type: 'BrandedTopper' },
      { type: 'OpinionTopper' },
    ],
    ('renders TopperMainImage when topper has $type type set and images',
    ($type) => {
      const mockContent = {
        topper: {
          __typename: $type,
          images: [
            {
              __typename: 'ImageDesktop',
              url: 'https://example.com/image1.jpg',
              width: 800,
              height: 600,
              sourceSet: [{ url: 'https://example.com/image1.jpg', dpr: 1 }],
            },
          ],
          fallbackImage: {
            __typename: 'ImageDesktop',
            url: 'https://example.com/fallback.jpg',
            width: 800,
            height: 600,
            altText: 'Test fallback image',
            sourceSet: [{ url: 'https://example.com/fallback.jpg', dpr: 1 }],
          },
        },
        body: {
          structured: {
            references: [],
          },
        },
      }

      const { container } = render(<MainImage content={mockContent} />)

      const topperMainImage = container.querySelector(
        '[data-testid="topper-main-image"]'
      )
      expect(topperMainImage).toBeTruthy()

      const topperData = JSON.parse(
        topperMainImage.getAttribute('data-topper') || '{}'
      )
      expect(topperData).toEqual(mockContent.topper)
    })
  )

  it('renders ImageSet when main-image is present in body references', () => {
    const mockMainImage = {
      type: 'main-image',
      picture: {
        __typename: 'PictureFullBleed',
        alt: 'Main image alt text',
        caption: 'Main image caption',
        credit: 'Photo credit',
        imageType: 'image',
        layoutWidth: 'standard',
        images: [
          {
            __typename: 'ImageDesktop',
            url: 'https://example.com/main-image.jpg',
            width: 800,
            height: 600,
            sourceSet: [{ url: 'https://example.com/main-image.jpg', dpr: 1 }],
          },
        ],
      },
    }

    const mockContent = {
      topper: {
        images: [], // Empty images array should not trigger TopperMainImage
      },
      body: {
        structured: {
          references: [mockMainImage],
        },
      },
    }

    const { container } = render(<MainImage content={mockContent} />)

    const imageSet = container.querySelector('[data-testid="image-set"]')
    expect(imageSet).toBeTruthy()
    expect(imageSet.getAttribute('data-is-main-image')).toBe('true')

    const contentData = JSON.parse(
      imageSet.getAttribute('data-content') || '{}'
    )
    expect(contentData).toEqual(mockMainImage)
  })

  it('renders FallbackImage when main-image-raw is present in body references', () => {
    const mockMainImageRaw = {
      type: 'main-image-raw',
      url: 'https://example.com/raw-image.jpg',
      width: 800,
      height: 600,
      altText: 'Raw image alt text',
      caption: 'Raw image caption',
    }

    const mockContent = {
      topper: null,
      body: {
        structured: {
          references: [mockMainImageRaw],
        },
      },
    }

    const { container } = render(<MainImage content={mockContent} />)

    const fallbackImage = container.querySelector(
      '[data-testid="fallback-image"]'
    )
    expect(fallbackImage).toBeTruthy()
    expect(fallbackImage.getAttribute('data-is-main-image')).toBe('true')

    const contentData = JSON.parse(
      fallbackImage.getAttribute('data-content') || '{}'
    )
    expect(contentData).toEqual(mockMainImageRaw)
  })

  it('renders null when no main image is found', () => {
    const mockContent = {
      topper: null,
      body: {
        structured: {
          references: [
            {
              type: 'other-reference',
              content: 'Some other content',
            },
          ],
        },
      },
    }

    const { container } = render(<MainImage content={mockContent} />)
    expect(container.firstChild).toBeNull()
  })

  it('does not render main image when there are lead images but not the right topper type', () => {
    const mockContent = {
      topper: {
        __typename: 'SplitTextTopper',
        images: [
          {
            __typename: 'ImageDesktop',
            url: 'https://example.com/image1.jpg',
            width: 800,
            height: 600,
          },
        ],
      },
      body: {
        structured: {
          references: [],
        },
      },
    }

    const { container } = render(<MainImage content={mockContent} />)
    expect(container.firstChild).toBeNull()
  })

  it('prioritizes TopperMainImage over main-image references when both are present', () => {
    const mockMainImage = {
      type: 'main-image',
      picture: {
        __typename: 'PictureFullBleed',
        alt: 'Main image alt text',
        images: [],
      },
    }

    const mockContent = {
      topper: {
        __typename: 'BasicTopper',
        images: [
          {
            __typename: 'ImageDesktop',
            url: 'https://example.com/image1.jpg',
            width: 800,
            height: 600,
            sourceSet: [{ url: 'https://example.com/image1.jpg', dpr: 1 }],
          },
        ],
        fallbackImage: {
          __typename: 'ImageDesktop',
          url: 'https://example.com/fallback.jpg',
          sourceSet: [{ url: 'https://example.com/fallback.jpg', dpr: 1 }],
        },
      },
      body: {
        structured: {
          references: [mockMainImage],
        },
      },
    }

    const { container } = render(<MainImage content={mockContent} />)

    expect(
      container.querySelector('[data-testid="topper-main-image"]')
    ).toBeTruthy()
    expect(container.querySelector('[data-testid="image-set"]')).toBeNull()
  })

  it('prioritizes main-image over main-image-raw when both are present', () => {
    const mockMainImage = {
      type: 'main-image',
      picture: {
        __typename: 'PictureFullBleed',
        alt: 'Main image alt text',
        images: [],
      },
    }

    const mockMainImageRaw = {
      type: 'main-image-raw',
      url: 'https://example.com/raw-image.jpg',
    }

    const mockContent = {
      topper: null,
      body: {
        structured: {
          references: [mockMainImage, mockMainImageRaw],
        },
      },
    }

    const { container } = render(<MainImage content={mockContent} />)

    expect(container.querySelector('[data-testid="image-set"]')).toBeTruthy()
    expect(container.querySelector('[data-testid="fallback-image"]')).toBeNull()
  })
})