import { describe, it, expect } from 'vitest'
import { h } from 'vue'
import { mount } from '@vue/test-utils'
import Tab from '../src/components/Tab/Tab.vue'
import TabItem from '../src/components/Tab/TabItem.vue'
import TabList from '../src/components/Tab/TabList.vue'

// P1-3 (owner 2026-07-24): add an explicit `change` event to Tab / TabList so a tab
// selection is a first-class, cross-CE DOM signal (not only the v-model plumbing
// event `update:modelValue`). Emitted from the same place as update:modelValue, so
// v-model and @change stay in lock-step.
describe('Tab change event (P1-3, explicit selection signal)', () => {
  it('base Tab emits change AND update:modelValue with the clicked value', async () => {
    const w = mount(Tab, {
      props: { modelValue: 'a' },
      slots: {
        default: () => [
          h(TabItem, { value: 'a' }, () => 'A'),
          h(TabItem, { value: 'b' }, () => 'B'),
        ],
      },
    })
    await w.findAll('.tab-item')[1].trigger('click')
    expect(w.emitted('change')).toEqual([['b']])
    expect(w.emitted('update:modelValue')).toEqual([['b']])
  })

  it('base Tab does not emit change when a disabled item is clicked', async () => {
    const w = mount(Tab, {
      props: { modelValue: 'a' },
      slots: {
        default: () => [
          h(TabItem, { value: 'a' }, () => 'A'),
          h(TabItem, { value: 'b', disabled: true }, () => 'B'),
        ],
      },
    })
    await w.findAll('.tab-item')[1].trigger('click')
    expect(w.emitted('change')).toBeUndefined()
  })

  it('TabList emits change (and update:modelValue) with the clicked value', async () => {
    const w = mount(TabList, {
      props: { modelValue: 'x', items: [{ label: 'X', value: 'x' }, { label: 'Y', value: 'y' }] },
    })
    await w.findAll('.tab-item')[1].trigger('click')
    expect(w.emitted('change')).toEqual([['y']])
    expect(w.emitted('update:modelValue')).toEqual([['y']])
  })
})