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

const globalConfig = {
  global: {
    components: {
      Checkbox: PrimeCheckbox
    },
    mocks: {
      $primevue: {
        config: {}
      }
    },
    stubs: {
      VLabel: true,
      VHint: true,
    }
  }
}

describe('VCheckbox.vue', () => {
  it('adds value to modelValue array when checkbox is clicked (multiple mode)', async () => {
    const wrapper = mount(VCheckbox, {
      props: {
        label: 'Fruit',
        modelValue: [],
        value: 'pomme'
      },
      global: globalConfig.global
    });

    const input = wrapper.find('input[type="checkbox"]');
    await input.setValue(true);

    const emitted = wrapper.emitted('update:modelValue');
    expect(emitted).toBeTruthy();
    expect(emitted?.[0]?.[0]).toContain('pomme');
  });

  it('removes value from modelValue array when checkbox is unchecked (multiple mode)', async () => {
    const wrapper = mount(VCheckbox, {
      props: {
        label: 'Fruit',
        modelValue: ['pomme'],
        value: 'pomme'
      },
      global: globalConfig.global
    });

    const input = wrapper.find('input[type="checkbox"]');
    await input.setValue(false);

    const emitted = wrapper.emitted('update:modelValue');
    expect(emitted).toBeTruthy();
    expect(emitted?.[0]?.[0]).not.toContain('pomme');
  });

  it('emits change, focus and blur events', async () => {
    const wrapper = mount(VCheckbox, {
      props: {
        label: 'Test Checkbox',
        modelValue: false
      },
      global: globalConfig.global
    });
    const input = wrapper.find('input[type="checkbox"]');
    await input.trigger('focus');
    await input.trigger('blur');
    await input.trigger('change');
    expect(wrapper.emitted('focus')).toBeTruthy();
    expect(wrapper.emitted('blur')).toBeTruthy();
    expect(wrapper.emitted('change')).toBeTruthy();
  });

  it('applies error and success classes based on props', () => {
    const errorWrapper = mount(VCheckbox, {
      props: {
        label: 'Error Checkbox',
        modelValue: false,
        errorMessage: 'Error occurred'
      },
      global: globalConfig.global
    });
    expect(errorWrapper.find('.p-checkbox.error').exists()).toBe(true);

    const successWrapper = mount(VCheckbox, {
      props: {
        label: 'Success Checkbox',
        modelValue: true,
        validMessage: 'Valid input'
      },
      global: globalConfig.global
    });
    expect(successWrapper.find('.p-checkbox.success').exists()).toBe(true);
  });
});