import {describe, expect, it, vi} from 'vitest'

import {render, screen} from '../../test-utils'

import {ProductVariantPrice} from './product-variant-price'

// Mock formatMoney function
vi.mock('../../utils/formatMoney', () => ({
  formatMoney: vi.fn((amount: string, currencyCode: string) => {
    const numAmount = parseFloat(amount)
    return currencyCode === 'USD'
      ? `$${numAmount.toFixed(2)}`
      : `${currencyCode} ${numAmount.toFixed(2)}`
  }),
}))

describe('ProductVariantPrice', () => {
  it('renders nothing when amount is missing', () => {
    const {container} = render(
      <ProductVariantPrice amount="" currencyCode="USD" />
    )

    expect(container.firstChild).toBeNull()
  })

  it('renders nothing when currencyCode is missing', () => {
    const {container} = render(
      <ProductVariantPrice amount="19.99" currencyCode="" />
    )

    expect(container.firstChild).toBeNull()
  })

  it('renders single price when no compare at price', () => {
    render(<ProductVariantPrice amount="19.99" currencyCode="USD" />)

    const price = screen.getByText('$19.99')
    expect(price).not.toHaveClass('line-through')
  })

  it('renders both prices when compare at price is provided and different', () => {
    render(
      <ProductVariantPrice
        amount="19.99"
        currencyCode="USD"
        compareAtPriceAmount="29.99"
      />
    )

    expect(screen.getByText('$19.99')).toBeInTheDocument()
    expect(screen.getByText('$29.99')).toBeInTheDocument()

    const compareAtPrice = screen.getByText('$29.99')
    expect(compareAtPrice).toHaveClass('line-through')
  })

  it('renders single price when compare at price equals current price', () => {
    render(
      <ProductVariantPrice
        amount="19.99"
        currencyCode="USD"
        compareAtPriceAmount="19.99"
      />
    )

    const prices = screen.getAllByText('$19.99')
    expect(prices).toHaveLength(1)
    expect(prices[0]).not.toHaveClass('line-through')
  })

  it('handles different currency codes', () => {
    render(
      <ProductVariantPrice
        amount="19.99"
        currencyCode="EUR"
        compareAtPriceAmount="29.99"
        compareAtPriceCurrencyCode="GBP"
      />
    )

    expect(screen.getByText('EUR 19.99')).toBeInTheDocument()
    expect(screen.getByText('GBP 29.99')).toBeInTheDocument()
  })

  it('applies custom className', () => {
    render(
      <ProductVariantPrice
        amount="19.99"
        currencyCode="USD"
        className="custom-class"
      />
    )

    const container = screen.getByText('$19.99').parentElement
    expect(container).toHaveClass('custom-class')
  })

  it('applies custom price classNames', () => {
    render(
      <ProductVariantPrice
        amount="19.99"
        currencyCode="USD"
        compareAtPriceAmount="29.99"
        currentPriceClassName="current-custom"
        originalPriceClassName="original-custom"
      />
    )

    const currentPrice = screen.getByText('$19.99')
    expect(currentPrice).toHaveClass('current-custom')

    const originalPrice = screen.getByText('$29.99')
    expect(originalPrice).toHaveClass('original-custom')
  })

  it('handles string and number amounts', () => {
    render(
      <ProductVariantPrice
        amount={19.99}
        currencyCode="USD"
        compareAtPriceAmount={29.99}
      />
    )

    expect(screen.getByText('$19.99')).toBeInTheDocument()
    expect(screen.getByText('$29.99')).toBeInTheDocument()
  })
})