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

describe('VTextarea.vue', () => {
  it('binds modelValue and emits update:modelValue correctly (v-model)', async () => {
    const wrapper = mount(VTextarea, {
      props: { modelValue: 'initial content' },
    });
    const textareaElement = wrapper.find('textarea');

    // Check initial value
    expect(textareaElement.element.value).toBe('initial content');

    // Simulate user input
    await textareaElement.setValue('new content');

    // Check emitted event
    expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['new content']);

    // Check that prop update (simulating parent v-model update) changes the value
    await wrapper.setProps({ modelValue: 'updated from parent' });
    expect(textareaElement.element.value).toBe('updated from parent');
  });

  it('applies placeholder when provided', () => {
    const placeholderText = 'Enter details...';
    const wrapper = mount(VTextarea, {
      props: { modelValue: '', placeholder: placeholderText },
    });
    expect(wrapper.find('textarea').attributes('placeholder')).toBe(placeholderText);
  });

  it('is disabled when disabled prop is true', () => {
    const wrapper = mount(VTextarea, {
      props: { modelValue: '', disabled: true },
    });
    expect(wrapper.find('textarea').attributes('disabled')).toBeDefined();
  });

  it('is not disabled by default', () => {
    const wrapper = mount(VTextarea, { props: { modelValue: '' } });
    expect(wrapper.find('textarea').attributes('disabled')).toBeUndefined();
  });

  it('is required when required prop is true', () => {
    const wrapper = mount(VTextarea, {
      props: { modelValue: '', required: true },
    });
    expect(wrapper.find('textarea').attributes('required')).toBeDefined();
  });

  it('is not required by default', () => {
    const wrapper = mount(VTextarea, { props: { modelValue: '' } });
    expect(wrapper.find('textarea').attributes('required')).toBeUndefined();
  });

  it('sets the rows attribute correctly', () => {
    const wrapper = mount(VTextarea, {
      props: { modelValue: '', rows: 5 },
    });
    expect(wrapper.find('textarea').attributes('rows')).toBe('5');
  });

  it('defaults rows to 3 if not provided', () => {
    const wrapper = mount(VTextarea, { props: { modelValue: '' } });
    expect(wrapper.find('textarea').attributes('rows')).toBe('3');
  });

  it('applies error class and aria-invalid when error prop is true', () => {
    const wrapper = mount(VTextarea, {
      props: { modelValue: '', error: true },
    });
    const textarea = wrapper.find('textarea');
    expect(textarea.classes()).toContain('form-input');
    expect(textarea.classes()).toContain('textarea'); // Specific class
    expect(textarea.classes()).toContain('error');
    expect(textarea.attributes('aria-invalid')).toBe('true');
  });

  it('does not apply error class or aria-invalid by default or when error is false', () => {
    const wrapperDefault = mount(VTextarea, { props: { modelValue: '' } });
    const textareaDefault = wrapperDefault.find('textarea');
    expect(textareaDefault.classes()).toContain('form-input');
    expect(textareaDefault.classes()).toContain('textarea');
    expect(textareaDefault.classes()).not.toContain('error');
    expect(textareaDefault.attributes('aria-invalid')).toBeNull();


    const wrapperFalse = mount(VTextarea, {
      props: { modelValue: '', error: false },
    });
    const textareaFalse = wrapperFalse.find('textarea');
    expect(textareaFalse.classes()).not.toContain('error');
    expect(textareaFalse.attributes('aria-invalid')).toBeNull();
  });

  it('passes id prop to the textarea element', () => {
    const textareaId = 'my-custom-textarea-id';
    const wrapper = mount(VTextarea, {
      props: { modelValue: '', id: textareaId },
    });
    expect(wrapper.find('textarea').attributes('id')).toBe(textareaId);
  });

  it('does not have an id attribute if id prop is not provided', () => {
    const wrapper = mount(VTextarea, { props: { modelValue: '' } });
    expect(wrapper.find('textarea').attributes('id')).toBeUndefined();
  });

  it('includes "textarea" class in addition to "form-input"', () => {
    const wrapper = mount(VTextarea, { props: { modelValue: '' } });
    expect(wrapper.find('textarea').classes()).toContain('textarea');
    expect(wrapper.find('textarea').classes()).toContain('form-input');
  });
});
