import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import ProvenanceRelationModal from '@/components/provenance/ProvenanceRelationModal.vue'
import vuetify from '@/plugins/vuetify'

const relation = {
  supplier: { id: 5, name: 'Asociación La Mesa', contact_email: 'info@mesa.co' },
  organization: { id: 3, name: 'Red de Economía Solidaria' },
  municipality: { id: 7, name: 'Santa Bárbara' },
  department: { id: 2, name: 'Antioquia' },
  country: { id: 1, name: 'Colombia', code: 'CO' },
}
const product = {
  id: 1,
  name: 'Panela regional',
  catalogue_images: ['http://localhost/media/panela.jpg'],
}

function mountModal (props = {}) {
  return mount(ProvenanceRelationModal, {
    props: { product, relation, visible: true, ...props },
    global: { plugins: [vuetify] },
  })
}

function bodyText () {
  return document.body.textContent
}

describe('ProvenanceRelationModal', () => {
  it('muestra el producto y todas las entidades de la relación', () => {
    mountModal()

    expect(bodyText()).toContain('Panela regional')
    expect(bodyText()).toContain('Proveedor')
    expect(bodyText()).toContain('Asociación La Mesa')
    expect(bodyText()).toContain('Organización')
    expect(bodyText()).toContain('Red de Economía Solidaria')
    expect(bodyText()).toContain('Municipio')
    expect(bodyText()).toContain('Santa Bárbara')
    expect(bodyText()).toContain('Departamento')
    expect(bodyText()).toContain('Antioquia')
    expect(bodyText()).toContain('País')
    expect(bodyText()).toContain('Colombia')
  })

  it('incluye los detalles de contacto del proveedor', () => {
    mountModal()

    expect(bodyText()).toContain('info@mesa.co')
  })

  it('muestra la imagen del producto cuando existe', () => {
    mountModal()

    expect(document.querySelector('img').getAttribute('src')).toBe(
      'http://localhost/media/panela.jpg'
    )
  })

  it('no muestra las entidades ausentes', () => {
    mountModal({ relation: { supplier: { id: 5, name: 'Asociación La Mesa' } } })

    expect(bodyText()).not.toContain('Organización')
    expect(bodyText()).not.toContain('Municipio')
    expect(bodyText()).not.toContain('Departamento')
    expect(bodyText()).not.toContain('País')
  })

  it('no muestra contenido cuando no hay relación', () => {
    mountModal({ relation: null })

    expect(bodyText()).not.toContain('Proveedor')
  })

  it('no muestra el diálogo cuando visible es false', () => {
    mountModal({ visible: false })

    expect(bodyText()).not.toContain('Asociación La Mesa')
  })
})