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

const options = [
  { value: 'a', label: 'A' },
  { value: 'b', label: 'B' },
  { value: 'c', label: 'C' },
]

describe('MultiSelect', () => {
  it('accepts string and number shorthand options', async () => {
    const wrapper = mount(MultiSelect, {
      props: {
        modelValue: ['glucose', 2],
        options: ['glucose', 2, { value: 'dox', label: 'Doxorubicin' }],
      },
    })

    expect(wrapper.findAll('button').map(button => button.text())).toEqual([
      'glucose',
      '2',
      'Doxorubicin',
    ])
    expect(wrapper.find('.mint-multi-select__summary').text()).toBe('glucose, 2')

    await wrapper.findAll('button')[2].trigger('click')

    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([
      ['glucose', 2, 'dox'],
    ])
  })

  it('uses the shared selection limit for maxSelections', async () => {
    const wrapper = mount(MultiSelect, {
      props: {
        modelValue: ['a'],
        options,
        maxSelections: 1,
      },
    })

    await wrapper.findAll('button')[1].trigger('click')

    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
    expect(wrapper.findAll('button')[1].attributes('disabled')).toBeDefined()
  })

  it('should reserve the check slot on every chip when only one is selected', () => {
    const wrapper = mount(MultiSelect, { props: { modelValue: ['a'], options } })

    expect(wrapper.findAll('.mint-multi-select__chip-check')).toHaveLength(3)
  })
})