import { describe, it, expect } from 'vitest'
import { mountSuspended, mockComponent } from '@nuxt/test-utils/runtime'
import PhotoSlider from './PhotoSlider.vue'

mockComponent('NuxtImg', {
  props: ['src', 'alt'],
  template: '<img :src="src" :alt="alt">',
})

describe('PhotoSlider', () => {
  it('hides the arrows and counter when there is one photo or fewer', async () => {
    const wrapper = await mountSuspended(PhotoSlider, {
      props: { photos: ['/a.jpg'], title: 'Session 1' },
    })
    expect(wrapper.find('.mm-slider-arrow').exists()).toBe(false)
    expect(wrapper.find('.mm-photo-counter').exists()).toBe(false)
  })

  it('shows a placeholder when the current photo is null', async () => {
    const wrapper = await mountSuspended(PhotoSlider, {
      props: { photos: [null], title: 'Session 1' },
    })
    expect(wrapper.find('.gallery-tile-placeholder').exists()).toBe(true)
  })

  it('advances to the next photo and wraps around', async () => {
    const wrapper = await mountSuspended(PhotoSlider, {
      props: { photos: ['/a.jpg', '/b.jpg', '/c.jpg'], title: 'Session 1' },
    })
    expect(wrapper.find('.mm-photo-counter').text()).toBe('1 / 3')

    await wrapper.find('.mm-slider-arrow.right').trigger('click')
    expect(wrapper.find('.mm-photo-counter').text()).toBe('2 / 3')

    await wrapper.find('.mm-slider-arrow.right').trigger('click')
    await wrapper.find('.mm-slider-arrow.right').trigger('click')
    expect(wrapper.find('.mm-photo-counter').text()).toBe('1 / 3')
  })

  it('goes to the previous photo and wraps around backwards', async () => {
    const wrapper = await mountSuspended(PhotoSlider, {
      props: { photos: ['/a.jpg', '/b.jpg', '/c.jpg'], title: 'Session 1' },
    })

    await wrapper.find('.mm-slider-arrow.left').trigger('click')
    expect(wrapper.find('.mm-photo-counter').text()).toBe('3 / 3')
  })

  it('resets to the first photo when the photos prop changes', async () => {
    const wrapper = await mountSuspended(PhotoSlider, {
      props: { photos: ['/a.jpg', '/b.jpg'], title: 'Session 1' },
    })
    await wrapper.find('.mm-slider-arrow.right').trigger('click')
    expect(wrapper.find('.mm-photo-counter').text()).toBe('2 / 2')

    await wrapper.setProps({ photos: ['/x.jpg', '/y.jpg', '/z.jpg'] })
    expect(wrapper.find('.mm-photo-counter').text()).toBe('1 / 3')
  })
})