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

describe('UIcon', () => {
  it('should render correctly', () => {
    const wrapper = mount(UIcon, {
      props: {
        icon: 'user1',
        color: 'success-700',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render with a slot', () => {
    const wrapper = mount(UIcon, {
      slots: {
        default: 'user1',
      },
      props: {
        color: 'success-700',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    const pathComponent = wrapper.find('.u-icon__svg path')
    expect(pathComponent.exists()).toBe(true)
    expect(pathComponent.attributes('d')).toBe(
      'M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z'
    )
  })

  it('should render with a custom size', () => {
    const wrapper = mount(UIcon, {
      props: {
        size: '40',
        icon: 'user1',
        color: 'success-700',
      },
    })
    const svgComponent = wrapper.find('.u-icon__svg')
    expect(svgComponent.exists()).toBe(true)
    expect(svgComponent.attributes('style')).toBe('height: 40px; width: 40px;')
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render with a custom color', () => {
    const wrapper = mount(UIcon, {
      props: {
        color: 'success-700',
        icon: 'user1',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should change color on hover', async () => {
    const wrapper = mount(UIcon, {
      props: {
        color: 'success-700',
        icon: 'user1',
      },
    })
    expect(wrapper.find('svg').classes()).toContain('stroke-success-700')
    expect(wrapper.find('svg').classes()).toContain('hover:stroke-success-800')
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should pass hover state', async () => {
    const wrapper = mount(UIcon, {
      props: {
        icon: 'user1',
        isHover: true,
        color: 'success-700',
      },
    })
    const pathComponent = wrapper.find('i')
    expect(pathComponent.exists()).toBe(true)
    expect(pathComponent.attributes('ishover')).toBe('true')
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should pass active state', async () => {
    const wrapper = mount(UIcon, {
      props: {
        icon: 'user1',
        isActive: true,
        color: 'success-700',
      },
    })
    const pathComponent = wrapper.find('i')
    expect(pathComponent.exists()).toBe(true)
    expect(pathComponent.attributes('isactive')).toBe('true')
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should should render correctly with default variant', async () => {
    const wrapper = mount(UIcon, {
      props: {
        icon: 'user1',
        color: 'success-700',
        variant: 'default',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should should render correctly with Light Circle variant', async () => {
    const wrapper = mount(UIcon, {
      props: {
        icon: 'user1',
        color: 'success-700',
        variant: 'lightCircle',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should should render correctly with Light Circle Outline variant', async () => {
    const wrapper = mount(UIcon, {
      props: {
        icon: 'user1',
        color: 'success-700',
        variant: 'lightCircleOutline',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should should render correctly with Dark Circle variant', async () => {
    const wrapper = mount(UIcon, {
      props: {
        icon: 'user1',
        color: 'success-700',
        variant: 'darkCircle',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should should render correctly with Light Square variant', async () => {
    const wrapper = mount(UIcon, {
      props: {
        icon: 'user1',
        color: 'success-700',
        variant: 'lightSquare',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should should render correctly with Mid Square variant', async () => {
    const wrapper = mount(UIcon, {
      props: {
        icon: 'user1',
        color: 'success-700',
        variant: 'midSquare',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should should render correctly with Dark Square variant', async () => {
    const wrapper = mount(UIcon, {
      props: {
        icon: 'user1',
        color: 'success-700',
        variant: 'darkSquare',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })
})