// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import React from 'react'
import renderer from 'react-test-renderer'
import MainImage from '../index'
import { ArticleQuery } from '@financial-times/cp-content-pipeline-client'
import { ContentTree } from '@financial-times/content-tree'

// Mock the ImageSet component
jest.mock('../../content-tree/ImageSet/index', () => ({
  __esModule: true,
  default: ({ isMainImage, content }) => (
    <div data-component="ImageSet" data-is-main-image={isMainImage}>
      <img
        src={content.picture?.default?.url}
        alt={content.picture?.alt || ''}
      />
    </div>
  ),
  FallbackImage: ({ isMainImage, content }) => (
    <div data-component="FallbackImage" data-is-main-image={isMainImage}>
      <img src={content.url} alt={content.alt || ''} />
    </div>
  ),
}))

const baseContent: ArticleQuery['content'] = {
  __typename: 'Article',
  title: 'Test Article',
  id: '00000000-0000-0000-0000-000000000000',
  url: 'https://www.ft.com/content/00000000-0000-0000-0000-000000000000',
  publishedDate: '2024-06-11T14:13:25.527Z',
  publishedTimestamp: 1718115205527,
  modifiedTimestamp: 1718115318431,
  publishReference: 'test-reference',
  firstPublishedDate: '2024-06-11T14:13:25.527Z',
  annotations: [],
  body: {
    structured: {
      tree: {
        type: 'body',
        version: 1,
        children: [],
      },
      references: [],
    },
  },
}

describe('MainImage component', () => {
  it('renders nothing when there is no main image', () => {
    const tree = renderer.create(<MainImage content={baseContent} />).toJSON()
    expect(tree).toMatchSnapshot()
  })

  it('renders ImageSet when main-image reference exists and removes alt text', () => {
    const mainImageReference: ContentTree.ImageSet = {
      type: 'main-image',
      id: 'image-id',
      picture: {
        sources: [],
        default: {
          url: 'https://example.com/image.jpg',
          width: 800,
          height: 600,
        },
        alt: 'Original alt text',
      },
    }

    const content: ArticleQuery['content'] = {
      ...baseContent,
      body: {
        structured: {
          tree: {
            type: 'body',
            version: 1,
            children: [],
          },
          references: [mainImageReference],
        },
      },
    }

    const tree = renderer.create(<MainImage content={content} />).toJSON()
    expect(tree).toMatchSnapshot()
  })

  it('renders FallbackImage when main-image-raw reference exists and removes alt text', () => {
    const mainImageRawReference = {
      type: 'main-image-raw',
      url: 'https://example.com/raw-image.jpg',
      alt: 'Original raw alt text',
      width: 800,
      height: 600,
    }

    const content: ArticleQuery['content'] = {
      ...baseContent,
      body: {
        structured: {
          tree: {
            type: 'body',
            version: 1,
            children: [],
          },
          references: [mainImageRawReference],
        },
      },
    }

    const tree = renderer.create(<MainImage content={content} />).toJSON()
    expect(tree).toMatchSnapshot()
  })

  it('prioritizes main-image over main-image-raw when both exist', () => {
    const mainImageReference: ContentTree.ImageSet = {
      type: 'main-image',
      id: 'image-id',
      picture: {
        sources: [],
        default: {
          url: 'https://example.com/image.jpg',
          width: 800,
          height: 600,
        },
        alt: 'Alt text for main image',
      },
    }

    const mainImageRawReference = {
      type: 'main-image-raw',
      url: 'https://example.com/raw-image.jpg',
      alt: 'Alt text for raw image',
      width: 800,
      height: 600,
    }

    const content: ArticleQuery['content'] = {
      ...baseContent,
      body: {
        structured: {
          tree: {
            type: 'body',
            version: 1,
            children: [],
          },
          references: [mainImageReference, mainImageRawReference],
        },
      },
    }

    const tree = renderer.create(<MainImage content={content} />).toJSON()
    expect(tree).toMatchSnapshot()
  })
})