import { render } from "@opensea/testing-utils/render"
import { screen } from "@testing-library/react"
import React from "react"
import { describe, expect, test } from "vitest"
import { Avatar } from "./Avatar"

describe("<Avatar />", () => {
  test("resizes the image", () => {
    const src =
      "https://i2.dev.seadn.io/bitcoin/3ddeb7c068d94b4e8a3b1f9245b2311e/1401e863904bd21e558879e28acb7608.png"
    render(<Avatar alt="Nice picture" size={48} src={src} />)

    const image = screen.getByRole("img", { name: "Nice picture" })
    expect(image).toHaveAttribute("width", "48")
    expect(image).toHaveAttribute("height", "48")
    expect(image).toHaveAttribute("src", `${src}?h=48&w=48`)
  })

  test("missing image", () => {
    render(<Avatar alt="Nice picture" size={48} />)

    const image = screen.getByRole("img", { name: "Nice picture" })
    expect(image).toHaveAttribute("width", "48")
    expect(image).toHaveAttribute("height", "48")
    expect(image).toHaveAttribute(
      "src",
      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
    )
  })

  test("video frame", () => {
    render(
      <Avatar
        alt="Nice picture"
        frameTime={1}
        size={48}
        src="https://i2.dev.seadn.io/base/0x0852af8836a0fbf8dc7a3556b3dd46109d29d0fb/c9772c851000be4491ddfa6c5c91cfa1.mp4"
      />,
    )

    const image = screen.getByRole("img", { name: "Nice picture" })
    expect(image).toHaveAttribute("width", "48")
    expect(image).toHaveAttribute("height", "48")
    expect(image).toHaveAttribute(
      "src",
      "https://i2.dev.seadn.io/base/0x0852af8836a0fbf8dc7a3556b3dd46109d29d0fb/c9772c851000be4491ddfa6c5c91cfa1.mp4?frame-time=1&h=48&w=48",
    )
  })
})