import { describe, it, expect, vi, beforeEach } from 'vitest'
import { useResponsiveComponent } from '#lib/composables'
import { useDevice } from '#imports'
import { DeviceEnum } from '#lib/enums'

vi.mock('nuxt/app', () => ({
  useNuxtApp: vi.fn(),
}))

vi.mock('#imports', () => ({
  useDevice: vi.fn().mockReturnValue({ isMobile: false }),
  persistedState: vi.fn().mockReturnValue({
    localStorage: {},
  }),
}))

describe('useResponsiveComponent', () => {
  const defaultUseDeviceProps = {
    isMobile: false,
    userAgent: '',
    isDesktop: false,
    isIos: false,
    isAndroid: false,
    isMobileOrTablet: false,
    isDesktopOrTablet: false,
    isTablet: false,
    isWindows: false,
    isMacOS: false,
    isApple: false,
    isSafari: false,
    isFirefox: false,
    isEdge: false,
    isChrome: false,
    isSamsung: false,
    isCrawler: false,
  }

  it('should return the desktop component and layout when not on mobile', () => {
    const componentDesktop = { template: '<div>Desktop Component</div>' }
    const componentMobile = { template: '<div>Mobile Component</div>' }

    const { component, layout } = useResponsiveComponent(
      componentDesktop,
      componentMobile,
    )

    expect(component).toBe(componentDesktop)
    expect(layout).toBe(DeviceEnum.DESKTOP)
  })

  it('should return the mobile component and layout when on mobile', () => {
    vi.mocked(useDevice).mockReturnValueOnce({
      ...defaultUseDeviceProps,
      isMobile: true,
    })

    const componentDesktop = { template: '<div>Desktop Component</div>' }
    const componentMobile = { template: '<div>Mobile Component</div>' }

    const { component, layout } = useResponsiveComponent(
      componentDesktop,
      componentMobile,
    )

    expect(component).toBe(componentMobile)
    expect(layout).toBe(DeviceEnum.MOBILE)
  })

  it('should return undefined for component if none are provided', () => {
    const { component, layout } = useResponsiveComponent()

    expect(component).toBeUndefined()
    expect(layout).toBe(DeviceEnum.DESKTOP)
  })

  it('should return desktop layout even if component is undefined', () => {
    const { component, layout } = useResponsiveComponent(undefined, undefined)

    expect(component).toBeUndefined()
    expect(layout).toBe(DeviceEnum.DESKTOP)
  })
})