import { render } from "@opensea/testing-utils/render"
import { composeStories } from "@storybook/react"
import { screen } from "@testing-library/react"
import React from "react"
import { describe, expect, test } from "vitest"
import { Image } from "./Image"
import * as stories from "./Image.stories"

const { VideoFrame, Original, Boost } = composeStories(stories)

describe("<Image />", () => {
  test("optimizes ~ all params", () => {
    render(
      <Image
        alt="Nice image"
        className="flex"
        fit="contain"
        height={1000}
        quality={50}
        src="https://i2.dev.seadn.io/ethereum/0x5af0d9827e0c53e4799bb226655a1de152a425a5/28bac4238ec3d45941c3e029abe8a124.png"
        width={1000}
      />,
    )
    const img = screen.getByRole("img", { name: "Nice image" })
    expect(img).toHaveAttribute("class", "flex")
    expect(img).toHaveAttribute("height", "1000")
    expect(img).toHaveAttribute("width", "1000")
    expect(img).toHaveAttribute(
      "src",
      "https://i2.dev.seadn.io/ethereum/0x5af0d9827e0c53e4799bb226655a1de152a425a5/28bac4238ec3d45941c3e029abe8a124.png?h=1000&w=1000&q=50&fit=contain",
    )
  })

  test("optimizes ~ one dimension", () => {
    render(
      <Image
        alt="Nice image"
        className="flex"
        src="https://i2.dev.seadn.io/ethereum/0x5af0d9827e0c53e4799bb226655a1de152a425a5/28bac4238ec3d45941c3e029abe8a124.png"
        width={1000}
      />,
    )
    const img = screen.getByRole("img", { name: "Nice image" })
    expect(img).toHaveAttribute("class", "flex")
    expect(img).toHaveAttribute(
      "src",
      "https://i2.dev.seadn.io/ethereum/0x5af0d9827e0c53e4799bb226655a1de152a425a5/28bac4238ec3d45941c3e029abe8a124.png?w=1000",
    )
  })

  test("missing image", () => {
    render(
      <Image
        alt="Nice image"
        className="flex"
        height={1000}
        src=""
        width={1000}
      />,
    )
    const img = screen.getByRole("img", { name: "Nice image" })
    expect(img).toHaveAttribute("class", "flex")
    expect(img).toHaveAttribute("height", "1000")
    expect(img).toHaveAttribute("width", "1000")
    expect(img).toHaveAttribute(
      "src",
      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
    )
  })

  test("mp4 frame extraction", () => {
    render(<VideoFrame className="flex" />)
    const img = screen.getByRole("img", { name: "Nice image" })
    expect(img).toHaveAttribute("class", "flex")
    expect(img).toHaveAttribute(
      "src",
      "https://i2.dev.seadn.io/earth.mp4?frame-time=1&w=1000",
    )
  })

  test("png frame extraction", () => {
    render(
      <Image
        alt="Nice image"
        className="flex"
        frameTime={1}
        src="https://i2.dev.seadn.io/ethereum/0x5af0d9827e0c53e4799bb226655a1de152a425a5/28bac4238ec3d45941c3e029abe8a124.png"
        width={1000}
      />,
    )
    const img = screen.getByRole("img", { name: "Nice image" })
    expect(img).toHaveAttribute("class", "flex")
    expect(img).toHaveAttribute(
      "src",
      "https://i2.dev.seadn.io/ethereum/0x5af0d9827e0c53e4799bb226655a1de152a425a5/28bac4238ec3d45941c3e029abe8a124.png?w=1000",
    )
  })

  test("boost", () => {
    render(<Boost alt="Nice image" className="flex" />)
    const img = screen.getByRole("img", { name: "Nice image" })
    expect(img).toHaveAttribute("class", "flex")
    expect(img).toHaveAttribute(
      "src",
      "https://i2.dev.seadn.io/ethereum/0x5af0d9827e0c53e4799bb226655a1de152a425a5/28bac4238ec3d45941c3e029abe8a124.png?h=250&w=250",
    )
  })

  test("original", () => {
    render(<Original />)
    const img = screen.getByRole("img", { name: "Nice image" })
    expect(img).toHaveAttribute("class", "flex")
    expect(img).toHaveAttribute(
      "src",
      "https://raw2.seadn.io/ethereum/0xbd3531da5cf5857e7cfaa92426877b022e612cf8/28788fc3bd769b396cd74a6c53e68ae9.png",
    )
  })
})