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

describe('UButton', () => {
  it('should render correctly', () => {
    const wrapper = mount(UButton, {
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should emit click event when clicked', async () => {
    const wrapper = mount(UButton, {
      slots: {
        default: 'Button',
      },
    })

    await wrapper.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('click')
  })

  it('should have sm classes when size is sm', () => {
    const wrapper = mount(UButton, {
      props: {
        size: 'sm',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have md classes when size is md', () => {
    const wrapper = mount(UButton, {
      props: {
        size: 'md',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have lg classes when size is lg', () => {
    const wrapper = mount(UButton, {
      props: {
        size: 'lg',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have xl classes when size is xl', () => {
    const wrapper = mount(UButton, {
      props: {
        size: 'xl',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have xxl classes when size is xxl', () => {
    const wrapper = mount(UButton, {
      props: {
        size: 'xxl',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have primary classes when type is primary', () => {
    const wrapper = mount(UButton, {
      props: {
        type: 'Primary',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have secondary gray classes when type is secondary gray', () => {
    const wrapper = mount(UButton, {
      props: {
        type: 'Secondary Gray',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have secondary color classes when type is secondary color', () => {
    const wrapper = mount(UButton, {
      props: {
        type: 'Secondary Color',
      },
      slots: {
        default: 'Button',
      },
    })

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

  it('should have tertiary gray classes when type is tertiary gray', () => {
    const wrapper = mount(UButton, {
      props: {
        type: 'Tertiary Gray',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have tertiary color classes when type is tertiary color', () => {
    const wrapper = mount(UButton, {
      props: {
        type: 'Tertiary Color',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have lick gray classes when type is link gray', () => {
    const wrapper = mount(UButton, {
      props: {
        type: 'Link Gray',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have link color classes when type is link color', () => {
    const wrapper = mount(UButton, {
      props: {
        type: 'Link Color',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have disabled classes when disabled is true', () => {
    const wrapper = mount(UButton, {
      props: {
        disabled: true,
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render prependIcon if icon is passed', () => {
    const wrapper = mount(UButton, {
      props: {
        prependIcon: 'placeholder',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.findComponent({ name: 'UIcon' }).exists()).toBe(true)
    expect(wrapper.findComponent({ name: 'UIcon' }).props('icon')).toBe(
      '$placeholder'
    )
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render appendIcon if icon is passed', () => {
    const wrapper = mount(UButton, {
      props: {
        appendIcon: 'placeholder',
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.findComponent({ name: 'UIcon' }).exists()).toBe(true)
    expect(wrapper.findComponent({ name: 'UIcon' }).props('icon')).toBe(
      '$placeholder'
    )
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have destructive classes when destructive is true', () => {
    const wrapper = mount(UButton, {
      props: {
        destructive: true,
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should have loader when loading is true', () => {
    const wrapper = mount(UButton, {
      props: {
        loading: true,
      },
      slots: {
        default: 'Button',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.findComponent({ name: 'USpinner' }).exists()).toBe(true)
  })
})