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

describe('UTooltip', () => {
  it('should render correctly', () => {
    const wrapper = mount(UTooltip, {
      props: {
        position: 'top',
        always: false,
      },
      slots: {
        tooltipToggle: { template: `<div class="toggle">Toggle</div>` },
        text: 'Tooltip Text',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  //test cases when always is false
  it('should show tooltip when mouse enters', async () => {
    const wrapper = mount(UTooltip, {
      props: {
        position: 'top',
        always: false,
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    await wrapper.find('.toggle').trigger('mouseenter')
    expect(wrapper.vm.tooltipIsVisible).toBe(true)
  })

  it('should hide tooltip when mouse leave', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        position: 'top',
        always: false,
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    await wrapper.find('.toggle').trigger('mouseenter')
    await wrapper.find('.toggle').trigger('mouseleave')
    expect(wrapper.vm.tooltipIsVisible).toBe(false)
  })

  //test case when always is true
  it('should always show tooltip when always true', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        position: 'top',
        always: true,
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    await wrapper.find('.toggle').trigger('mouseenter')
    await wrapper.find('.toggle').trigger('mouseleave')
    expect(wrapper.vm.tooltipIsVisible).toBe(true)
  })

  //theme test cases
  it('should have light theme classes', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        theme: 'light',
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have light theme classes', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        theme: 'dark',
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })

  //position test cases
  it('should have top position classes', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        position: 'none top',
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have bottom position classes', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        position: 'none bottom',
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have bottom arrow position classes', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        position: 'bottom',
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have top arrow position classes', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        position: 'top',
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have bottom-start position classes', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        position: 'bottom-start',
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have bottom-end position classes', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        position: 'bottom-end',
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have top-start position classes', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        position: 'top-start',
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have top-end position classes', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        position: 'top-end',
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have left position classes', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        position: 'left',
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have right position classes', async () => {
    const wrapper = shallowMount(UTooltip, {
      props: {
        position: 'right',
      },
      slots: {
        tooltipToggle: { template: `<div>Toggle</div>` },
        text: 'Tooltip Text',
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })
})