// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import React from 'react'
// TODO: React test renderer is depracated, we should use @testing-library/react
// https://react.dev/warnings/react-test-renderer
import renderer from 'react-test-renderer'
import prettier from 'prettier'
import { TextEncoder } from 'util'
if (typeof global.TextEncoder === 'undefined') {
  global.TextEncoder = TextEncoder
}
import ClipServer from '../template/index'

const formatString = (html) =>
  prettier.format(html, {
    parser: 'html',
    printWidth: 80, // Specify your preferred line width
    tabWidth: 2, // Specify your preferred tab width
    useTabs: false, // Use spaces instead of tabs
    // Additional prettier options...
  })

describe('Clip Snapshot', () => {
  describe('component rendered on server', () => {
    const id = 'https://api.ft.com/content/00000000-0000-0000-0000-000000000000'
    const url = 'localhost:8080/fakevideo.mpg'
    const poster = 'localhost:8080/fakeposter.jpg'
    const clips = [
      {
        dataSource: [
          {
            binaryUrl: url,
            mediaType: 'video/mp4',
          },
        ],
      },
    ]

    const clipsWithPoster = [
      {
        dataSource: [
          {
            binaryUrl: url,
            mediaType: 'video/mp4',
          },
        ],
        poster,
      },
    ]

    describe('ContentLayout integration tests', () => {
      it('inset-left render - should wrap in ContentLayout with proper classes', () => {
        const tree = renderer
          .create(
            <ClipServer
              content={{ url, clips, layoutWidth: 'inset-left' }}
            ></ClipServer>
          )
          .toJSON()
        expect(formatString(tree)).toMatchSnapshot()
      })

      it('inset-right render - should wrap in ContentLayout with proper classes', () => {
        const tree = renderer
          .create(
            <ClipServer
              content={{ url, clips, layoutWidth: 'inset-right' }}
            ></ClipServer>
          )
          .toJSON()
        expect(formatString(tree)).toMatchSnapshot()
      })

      it('edge case: custom dataLayout value should wrap in ContentLayout', () => {
        const tree = renderer
          .create(
            <ClipServer
              content={{ url, clips, layoutWidth: 'custom-layout' }}
            ></ClipServer>
          )
          .toJSON()
        expect(formatString(tree)).toMatchSnapshot()
      })

      it('returns an empty string when clips is empty', () => {
        const tree = renderer
          .create(
            <ClipServer
              content={{ id, clips: [], layoutWidth: 'in-line' }}
            ></ClipServer>
          )
          .toJSON()

        expect(tree).toMatchSnapshot()
      })
    })

    it('in-line render', () => {
      const tree = renderer
        .create(
          <ClipServer
            content={{ id, clips, layoutWidth: 'in-line' }}
          ></ClipServer>
        )
        .toJSON()

      expect(formatString(tree)).toMatchSnapshot()
    })
    it('full-grid default render', () => {
      const tree = renderer
        .create(
          <ClipServer
            content={{ id, clips, layoutWidth: 'full-grid' }}
          ></ClipServer>
        )
        .toJSON()
      expect(formatString(tree)).toMatchSnapshot()
    })
    it('mid-grid default render', () => {
      const tree = renderer
        .create(
          <ClipServer
            content={{ id, clips, layoutWidth: 'mid-grid' }}
          ></ClipServer>
        )
        .toJSON()
      expect(formatString(tree)).toMatchSnapshot()
    })

    it('in-line render with attributes', () => {
      const tree = renderer
        .create(
          <ClipServer
            content={{
              id,
              layoutWidth: 'in-line',
              autoplay: true,
              loop: true,
              description: 'Video description',
              caption: 'caption text',
              credits: '@credits',
              clips: clipsWithPoster,
              muted: true,
            }}
          ></ClipServer>
        )
        .toJSON()
      expect(formatString(tree)).toMatchSnapshot()
    })
    it('full-grid render with attributes', () => {
      const tree = renderer
        .create(
          <ClipServer
            content={{
              id,
              layoutWidth: 'full-grid',
              autoplay: true,
              loop: true,
              description: 'Video description',
              caption: 'caption text',
              credits: '@credits',
              clips: clipsWithPoster,
              muted: true,
            }}
          ></ClipServer>
        )
        .toJSON()
      expect(formatString(tree)).toMatchSnapshot()
    })
    it('mid-grid render with attributes', () => {
      const tree = renderer
        .create(
          <ClipServer
            content={{
              id,
              layoutWidth: 'mid-grid',
              autoplay: true,
              loop: true,
              description: 'Video description',
              caption: 'caption text',
              credits: '@credits',
              clips: clipsWithPoster,
              muted: true,
            }}
          ></ClipServer>
        )
        .toJSON()
      expect(formatString(tree)).toMatchSnapshot()
    })

    it('renders multiple video sources', () => {
      const videoWithMultipleSources = {
        content: {
          layoutWidth: 'in-line',
          id: 'https://api.ft.com/content/84d7e1b0-e8b2-4ffc-a798-306f29dc9d52',
          description:
            ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
          caption: 'Aenean lobortis volutpat nunc vitae elementum',
          clips: [
            {
              dataSource: [
                {
                  binaryUrl: 'https://whatever/1080x1920.mp4',
                  mediaType: 'video/mp4',
                  pixelHeight: 1080,
                  pixelWidth: 1920,
                },
                {
                  binaryUrl: 'https://whatever/320x240.mp4',
                  mediaType: 'video/mp4',
                  pixelHeight: 320,
                  pixelWidth: 240,
                },
                {
                  binaryUrl: 'https://whatever/640x480.avi',
                  mediaType: 'video/avi',
                  pixelHeight: 640,
                  pixelWidth: 480,
                },
              ],
              poster: 'https://whatever/1080x1920.jpg',
            },
          ],
        },
      }
      const tree = renderer
        .create(<ClipServer {...videoWithMultipleSources}></ClipServer>)
        .toJSON()
      expect(formatString(tree)).toMatchSnapshot()
    })

    // Temporary test to check that the new Origami image is supported.
    it('supports new Origami images, fallbacking to the previous implementation', () => {
      const tree = renderer
        .create(
          <ClipServer
            content={{
              id,
              layoutWidth: 'full-grid',
              autoplay: true,
              loop: true,
              description: 'Video description',
              caption: 'caption text',
              credits: '@credits',
              // New Origami image
              clips: [
                {
                  dataSource: [
                    {
                      binaryUrl:
                        'https://spark-clips-prod.s3.eu-west-1.amazonaws.com/raw-media-files/17018837600780',
                      mediaType: 'video/mp4',
                    },
                  ],
                  poster:
                    'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2F898c06df-6ffa-4ed6-87a3-48a8edc309ae?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1',
                },
              ],
              muted: true,
            }}
          ></ClipServer>
        )
        .toJSON()
      expect(formatString(tree)).toMatchSnapshot()
    })
  })
})