import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import ChildRoutineOverlay from '../ChildRoutineOverlay.vue'

// Mock getCachedImageUrl to return a simple data URL
vi.mock('@/common/imageCache', () => ({
  getCachedImageUrl: vi.fn(() => Promise.resolve('data:image/svg+xml,%3Csvg%3E%3C/svg%3E')),
}))

describe('ChildRoutineOverlay', () => {
  const routine = {
    id: 'routine-1',
    name: 'Morning Routine',
    points: 12,
    image_id: 'routine-image',
    image_url: '/images/routine.png',
    items: [
      {
        id: 'item-1',
        routine_id: 'routine-1',
        name: 'Brush Teeth',
        image_id: null,
        order: 0,
      },
      {
        id: 'item-2',
        routine_id: 'routine-1',
        name: 'Make Bed',
        image_id: null,
        order: 1,
      },
    ],
  }

  it('emits close when the backdrop is clicked', async () => {
    const wrapper = mount(ChildRoutineOverlay, {
      props: {
        show: true,
        routine,
        canComplete: true,
      },
    })

    await wrapper.find('.overlay-backdrop').trigger('click')

    expect(wrapper.emitted('close')).toHaveLength(1)
  })

  it('emits task-click and complete from the appropriate controls', async () => {
    const wrapper = mount(ChildRoutineOverlay, {
      props: {
        show: true,
        routine,
        canComplete: true,
      },
    })

    // Wait for async image resolution to complete
    await wrapper.vm.$nextTick()
    await new Promise((resolve) => setTimeout(resolve, 50))

    await wrapper.find('.task-card').trigger('click')
    await wrapper.find('.btn-primary').trigger('click')

    expect(wrapper.emitted('task-click')).toEqual([[routine.items[0]]])
    expect(wrapper.emitted('complete')).toHaveLength(1)
  })
})
