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

describe('Checkbox', () => {
  it('renders slot content', () => {
    const wrapper = mount(Checkbox, { slots: { default: 'Option 1' } })
    expect(wrapper.text()).toContain('Option 1')
  })

  it('shows checked state when modelValue is true', () => {
    const wrapper = mount(Checkbox, { props: { modelValue: true } })
    expect(wrapper.find('.cb-box--checked').exists()).toBe(true)
  })

  it('shows indeterminate state when indeterminate is true', () => {
    const wrapper = mount(Checkbox, { props: { indeterminate: true } })
    expect(wrapper.find('.cb-box--indeterminate').exists()).toBe(true)
  })

  it('does not emit toggle when disabled', async () => {
    const wrapper = mount(Checkbox, {
      props: { disabled: true, modelValue: false },
      slots: { default: 'Disabled' },
    })

    await wrapper.find('label').trigger('click')
    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
    expect(wrapper.find('label').classes()).toContain('cb--disabled')
  })

  it('keeps the checked glyph when disabled', () => {
    const wrapper = mount(Checkbox, {
      props: { disabled: true, modelValue: true },
      slots: { default: 'Checked disabled' },
    })

    expect(wrapper.find('.cb-box--checked').exists()).toBe(true)
    expect(wrapper.find('.cb-icon--selected').exists()).toBe(true)
    expect(wrapper.find('.cb-icon--selected svg').exists()).toBe(true)
  })

  it('keeps the indeterminate glyph when disabled', () => {
    const wrapper = mount(Checkbox, {
      props: { disabled: true, indeterminate: true },
      slots: { default: 'Some disabled' },
    })

    expect(wrapper.find('.cb-box--indeterminate').exists()).toBe(true)
    expect(wrapper.find('.cb-icon--minus').exists()).toBe(true)
    expect(wrapper.find('.cb-icon--minus svg').exists()).toBe(true)
  })
})