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

vi.mock('@/components/graph/VisChart.vue', () => ({
  default: {
    name: 'VisChart',
    template: '<div class="vis-chart-stub" />',
    props: ['nodes', 'edges', 'height', 'options', 'minVerticalSpacing'],
  },
}))

const provenance = [
  {
    product: { id: 1, name: 'Panela regional por Kg' },
    suppliers: [
      {
        supplier: { id: 5, name: 'Asociación La Mesa' },
        organization: { id: 3, name: 'Red de Economía Solidaria' },
        municipality: { id: 7, name: 'La Mesa' },
        department: { id: 2, name: 'Cundinamarca' },
        country: { id: 1, name: 'Colombia', code: 'CO' },
      },
    ],
  },
]

function mountSection (props = {}) {
  return mount(ProvenanceSection, {
    props: { provenance, ...props },
    global: { plugins: [vuetify] },
  })
}

describe('ProvenanceSection', () => {
  it('no renderiza nada cuando no hay provenance', () => {
    const wrapper = mountSection({ provenance: null })

    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
  })

  it('no renderiza nada cuando provenance es una lista vacía', () => {
    const wrapper = mountSection({ provenance: [] })

    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
  })

  it('muestra el título y oculta el gráfico por defecto', () => {
    const wrapper = mountSection()

    expect(wrapper.text()).toContain('Origen de los productos')
    expect(wrapper.text()).not.toContain('historia')
    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
  })

  it('muestra el gráfico al hacer clic en el título y lo oculta al volver a hacer clic', async () => {
    const wrapper = mountSection()

    await wrapper.find('[data-test="provenance-toggle"]').trigger('click')
    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(true)

    await wrapper.find('[data-test="provenance-toggle"]').trigger('click')
    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
  })

  it('también despliega y repliega con el botón de chevron', async () => {
    const wrapper = mountSection()

    const button = wrapper.find('[data-test="provenance-toggle-button"]')
    expect(button.exists()).toBe(true)
    await button.trigger('click')
    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(true)

    await button.trigger('click')
    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
  })

  it('pasa el provenance al gráfico al desplegarlo', async () => {
    const wrapper = mountSection()

    await wrapper.find('[data-test="provenance-toggle"]').trigger('click')

    expect(wrapper.findComponent(ProvenanceGraph).props('provenance')).toStrictEqual(provenance)
  })
})