/* eslint-disable no-unused-vars */
import * as React from 'react'
import {render, screen} from '@testing-library/react'
import {ResponsiveImage} from '..'
import {srcErrorMsg, VALID_CLOUDINARY_START} from '../ResponsiveImage'
import {vi} from 'vitest'
import {injectTransforms} from '../helpers'

const SRC_BASE = `https://res.cloudinary.com/mabx-eu-uat/image/upload`
const SRC_END = `v1/demo/osrxy6zh0rrpaqx012c7`
const SRC_URL = `${SRC_BASE}/${SRC_END}`

describe(`ResponsiveImage`, () => {
  beforeEach(() => {
    vi.spyOn(console, `warn`).mockImplementation(() => null)
  })

  afterEach(() => {
    vi.restoreAllMocks()
  })

  it(`handles invalid src`, () => {
    const fallbackText = `some fallback text`
    render(<ResponsiveImage src="someInvalidUrl" fallback={<>{fallbackText}</>} />)

    expect(screen.getByText(fallbackText)).toBeInTheDocument()
    expect(console.warn).toHaveBeenCalledWith(srcErrorMsg)
    expect(screen.queryByRole(`img`)).not.toBeInTheDocument()
  })

  it(`renders correctly`, () => {
    render(<ResponsiveImage src={VALID_CLOUDINARY_START} />)
    const img = screen.getByRole(`img`)
    expect(img).toBeInTheDocument()
    expect(img).toHaveAttribute(`src`, `${VALID_CLOUDINARY_START}/f_auto/q_60,w_300`)
  })

  it(`adds object-fit:cover to className unless alternative is provided`, () => {
    const {rerender} = render(<ResponsiveImage src={VALID_CLOUDINARY_START} />)
    const img = screen.getByRole(`img`)
    expect(img).toHaveClass(`object-fit:cover`)
    rerender(<ResponsiveImage className="object-fit:contain" src={VALID_CLOUDINARY_START} />)
    expect(img).toHaveClass(`object-fit:contain`)
    expect(img).not.toHaveClass(`object-fit:cover`)
  })

  it(`creates srcset sizes by injecting the size/quality transform prior to after-effect transforms`, () => {
    const {rerender} = render(<ResponsiveImage src={injectTransforms(SRC_URL, `e_blur:400`)} />)
    const img = screen.getByRole(`img`)
    expect(img).toBeInTheDocument()
    expect(img).toHaveAttribute(`data-srcset`)

    expect(img.dataset.srcset).toEqual(expect.stringContaining(`q_60,w_300/e_blur:400`))

    rerender(<ResponsiveImage src={injectTransforms(SRC_URL, `e_trim/e_blur:400`)} />)
    expect(img.dataset.srcset).toEqual(expect.stringContaining(`e_trim/q_60,w_300/e_blur:400`))
  })
})