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

describe('BaseButton', () => {
  it('renders slot content', () => {
    const wrapper = mount(BaseButton, {
      slots: { default: 'Click me' },
    })
    expect(wrapper.text()).toContain('Click me')
  })

  it('renders as a <button> by default', () => {
    const wrapper = mount(BaseButton, {
      slots: { default: 'OK' },
    })
    expect(wrapper.element.tagName).toBe('BUTTON')
  })

  it('applies primary variant class by default', () => {
    const wrapper = mount(BaseButton, { slots: { default: 'OK' } })
    expect(wrapper.classes()).toContain('btn--primary')
  })

  it('applies the given variant class', () => {
    const wrapper = mount(BaseButton, {
      props: { variant: 'destructive' },
      slots: { default: 'Delete' },
    })
    expect(wrapper.classes()).toContain('btn--destructive')
  })

  it('shows spinner element when loading is true', () => {
    const wrapper = mount(BaseButton, {
      props: { loading: true },
      slots: { default: 'Saving...' },
    })
    expect(wrapper.find('.btn__spinner').exists()).toBe(true)
  })

  it('does not show spinner when loading is false', () => {
    const wrapper = mount(BaseButton, {
      props: { loading: false },
      slots: { default: 'Save' },
    })
    expect(wrapper.find('.btn__spinner').exists()).toBe(false)
  })

  it('applies btn--loading class when loading', () => {
    const wrapper = mount(BaseButton, {
      props: { loading: true },
      slots: { default: 'Wait' },
    })
    expect(wrapper.classes()).toContain('btn--loading')
  })

  it('is disabled when disabled prop is true', () => {
    const wrapper = mount(BaseButton, {
      props: { disabled: true },
      slots: { default: 'Blocked' },
    })
    expect((wrapper.element as HTMLButtonElement).disabled).toBe(true)
  })

  it('is disabled when loading prop is true', () => {
    const wrapper = mount(BaseButton, {
      props: { loading: true },
      slots: { default: 'Loading' },
    })
    expect((wrapper.element as HTMLButtonElement).disabled).toBe(true)
  })

  it('is not disabled when neither disabled nor loading', () => {
    const wrapper = mount(BaseButton, {
      props: { disabled: false, loading: false },
      slots: { default: 'Go' },
    })
    expect((wrapper.element as HTMLButtonElement).disabled).toBe(false)
  })

  it('emits click event when clicked and not disabled', async () => {
    const wrapper = mount(BaseButton, { slots: { default: 'Go' } })
    await wrapper.trigger('click')
    expect(wrapper.emitted('click')).toBeTruthy()
  })

  it('type attribute defaults to button', () => {
    const wrapper = mount(BaseButton, { slots: { default: 'OK' } })
    expect(wrapper.attributes('type')).toBe('button')
  })

  it('type attribute can be set to submit', () => {
    const wrapper = mount(BaseButton, {
      props: { type: 'submit' },
      slots: { default: 'Submit' },
    })
    expect(wrapper.attributes('type')).toBe('submit')
  })

  it('renders as an anchor when tag is a', () => {
    const wrapper = mount(BaseButton, {
      props: { tag: 'a' },
      slots: { default: 'Link' },
    })
    expect(wrapper.element.tagName).toBe('A')
    // <a> should not have a type attribute
    expect(wrapper.attributes('type')).toBeUndefined()
  })
})