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

// Mock VButton or other components if they are deeply tested and not relevant to VListItem's direct unit tests
// For example, if VButton has complex logic:
// vi.mock('./VButton.vue', () => ({
//   name: 'VButton',
//   template: '<button><slot/></button>'
// }));

describe('VListItem.vue', () => {
  it('renders default slot content in .list-item-content', () => {
    const itemContent = '<span>Hello World</span>';
    const wrapper = mount(VListItem, {
      slots: { default: itemContent },
    });
    const contentDiv = wrapper.find('.list-item-content');
    expect(contentDiv.exists()).toBe(true);
    expect(contentDiv.html()).toContain(itemContent);
  });

  it('applies .list-item class to the root element', () => {
    const wrapper = mount(VListItem);
    expect(wrapper.classes()).toContain('list-item');
  });

  it('applies .completed class when completed prop is true', () => {
    const wrapper = mount(VListItem, { props: { completed: true } });
    expect(wrapper.classes()).toContain('completed');
  });

  it('does not apply .completed class when completed prop is false or default', () => {
    const wrapperDefault = mount(VListItem);
    expect(wrapperDefault.classes()).not.toContain('completed');

    const wrapperFalse = mount(VListItem, { props: { completed: false } });
    expect(wrapperFalse.classes()).not.toContain('completed');
  });

  it('applies .swipable class when swipable prop is true', () => {
    const wrapper = mount(VListItem, { props: { swipable: true } });
    expect(wrapper.classes()).toContain('swipable');
  });

  it('applies .is-swiped class when isSwiped and swipable props are true', () => {
    const wrapper = mount(VListItem, {
      props: { swipable: true, isSwiped: true },
    });
    expect(wrapper.classes()).toContain('is-swiped');
  });

  it('does not apply .is-swiped class if swipable is false, even if isSwiped is true', () => {
    const wrapper = mount(VListItem, {
      props: { swipable: false, isSwiped: true },
    });
    expect(wrapper.classes()).not.toContain('is-swiped');
  });

  it('does not apply .is-swiped class by default', () => {
    const wrapper = mount(VListItem);
    expect(wrapper.classes()).not.toContain('is-swiped');
  });

  it('renders swipe-actions-right slot when swipable is true and slot has content', () => {
    const actionsContent = '<button>Delete</button>';
    const wrapper = mount(VListItem, {
      props: { swipable: true },
      slots: { 'swipe-actions-right': actionsContent },
    });
    const actionsDiv = wrapper.find('.swipe-actions.swipe-actions-right');
    expect(actionsDiv.exists()).toBe(true);
    expect(actionsDiv.html()).toContain(actionsContent);
  });

  it('does not render swipe-actions-right slot if swipable is false', () => {
    const wrapper = mount(VListItem, {
      props: { swipable: false },
      slots: { 'swipe-actions-right': '<button>Delete</button>' },
    });
    expect(wrapper.find('.swipe-actions.swipe-actions-right').exists()).toBe(false);
  });

  it('does not render swipe-actions-right slot if swipable is true but slot has no content', () => {
    const wrapper = mount(VListItem, {
      props: { swipable: true },
      // No swipe-actions-right slot
    });
    expect(wrapper.find('.swipe-actions.swipe-actions-right').exists()).toBe(false);
  });


  it('renders swipe-actions-left slot when swipable is true and slot has content', () => {
    const actionsContent = '<button>Archive</button>';
    const wrapper = mount(VListItem, {
      props: { swipable: true },
      slots: { 'swipe-actions-left': actionsContent },
    });
    const actionsDiv = wrapper.find('.swipe-actions.swipe-actions-left');
    expect(actionsDiv.exists()).toBe(true);
    expect(actionsDiv.html()).toContain(actionsContent);
  });

  it('does not render swipe-actions-left slot if swipable is false', () => {
    const wrapper = mount(VListItem, {
      props: { swipable: false },
      slots: { 'swipe-actions-left': '<button>Archive</button>' },
    });
    expect(wrapper.find('.swipe-actions.swipe-actions-left').exists()).toBe(false);
  });

  it('root element is an <li> by default', () => {
    const wrapper = mount(VListItem);
    expect(wrapper.element.tagName).toBe('LI');
  });
});
