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

describe('UBadge', () => {
  it('renders correctly', () => {
    const wrapper = mount(UBadge)
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('UBadge sizes', () => {
  it('has appropriate sm size classes', () => {
    const wrapper = mount(UBadge, {
      props: {
        size: 'sm',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has appropriate md size classes', () => {
    const wrapper = mount(UBadge, {
      props: {
        size: 'md',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has appropriate lg size classes', () => {
    const wrapper = mount(UBadge, {
      props: {
        size: 'lg',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('UBadge events', () => {
  it('emits click event', async () => {
    const wrapper = mount(UBadge)
    await wrapper.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('click')
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('UBadge colors', () => {
  it('has default type with primary color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'primary',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with primary color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'primary',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has default type with gray color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'gray',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with gray color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'gray',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has default type with error color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'error',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with error color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'error',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has default type with warning color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'warning',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with warning color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'warning',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has default type with success color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'success',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with success color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'success',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has default type with gray-blue color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'gray-blue',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with gray-blue color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'gray-blue',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has default type with blue-light color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'blue-light',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with blue-light color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'blue-light',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has default type with blue color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'blue',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with blue color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'blue',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has default type with indigo color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'indigo',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with indigo color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'indigo',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has default type with purple color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'purple',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with purple color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'purple',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has default type with pink color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'pink',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with pink color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'pink',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has default type with rose color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'rose',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with rose color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'rose',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has default type with orange color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'default',
        color: 'orange',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has outlined type with orange color', () => {
    const wrapper = mount(UBadge, {
      props: {
        type: 'outlined',
        color: 'orange',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('UBadge with avatar', () => {
  it('has avatar with image', () => {
    const wrapper = mount(UBadge, {
      props: {
        avatarImagePath:
          'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGPXzqW9j5WdvfZp6Dkt_pNerP_ZZz8w2U6KHAZ9o&s',
      },
    })
    const avatarComponent = wrapper.findComponent({ name: 'UAvatar' })
    expect(avatarComponent.exists()).toBe(true)
    expect(wrapper.html()).toMatchSnapshot()
    //check imagePath prop of UAvatar equals to avatarImagePath prop of UBadge
    expect(avatarComponent.props('imagePath')).toBe(
      wrapper.props('avatarImagePath')
    )
  })

  it('has avatar with letters', () => {
    const wrapper = mount(UBadge, {
      props: {
        avatarText: 'NP',
      },
    })
    const avatarComponent = wrapper.findComponent({ name: 'UAvatar' })
    expect(avatarComponent.exists()).toBe(true)
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('UBadge with icon', () => {
  it('has icon', () => {
    const wrapper = mount(UBadge, {
      props: {
        arrowUp: true,
      },
    })
    const iconComponent = wrapper.findComponent({ name: 'UIcon' })
    expect(iconComponent.exists()).toBe(true)
    expect(iconComponent.props('icon')).toBe('$arrowUp')
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has icon', () => {
    const wrapper = mount(UBadge, {
      props: {
        arrowRight: true,
      },
    })
    const iconComponent = wrapper.findComponent({ name: 'UIcon' })
    expect(iconComponent.exists()).toBe(true)
    expect(iconComponent.props('icon')).toBe('$arrowRight')
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('has icon', () => {
    const wrapper = mount(UBadge, {
      props: {
        plus: true,
      },
    })
    const iconComponent = wrapper.findComponent({ name: 'UIcon' })
    expect(iconComponent.exists()).toBe(true)
    expect(iconComponent.props('icon')).toBe('$plus')
    expect(wrapper.html()).toMatchSnapshot()
  })
})