import { mount } from '@vue/test-utils'
import AButton from '#adata-ui/components/elements/button/AButton.vue'
import LoaderCircle from '#adata-ui/icons/icon-loader-circle.vue'
import CheckIcon from '#adata-ui/icons/check/check.vue'

describe('AButton', () => {
  it('renders with default props', () => {
    const wrapper = mount(AButton, {
      props: {
        variant: 'primary',
        view: 'default',
        size: 'lg',
        form: 'button',
        loading: false,
        disabled: false,
        block: false
      },
      slots: {
        default: 'Button'
      }
    })
    expect(wrapper.html()).toMatchInlineSnapshot(`
      "<button class="body-400 rounded-md cursor-pointer outline-none transition duration-200 select-none bg-blue-700 text-white hover:bg-blue-900 active:bg-deepblue-900 active:text-white px-4 py-2.5 relative transition"><span class="flex items-center justify-center gap-2"><!---->Button</span>
        <!--v-if-->
      </button>"
    `)
  })

  it('shows loader when loading is true', () => {
    const wrapper = mount(AButton, {
      props: { loading: true }
    })
    expect(wrapper.findComponent(LoaderCircle).exists()).toBe(true)
    expect(wrapper.find('span').classes()).toContain('opacity-0')
  })

  it('renders button correctly with custom props', () => {
    const wrapper = mount(AButton, {
      props: {
        variant: 'success',
        view: 'outline',
        size: 'sm',
        form: 'icon',
        icon: CheckIcon,
        loading: false,
        disabled: false,
        block: true
      },
      slots: {
        default: 'Icon'
      }
    })
    expect(wrapper.findComponent(CheckIcon).exists()).toBe(true)
    expect(wrapper.find('button').attributes('disabled')).toBeUndefined()
  })

  it('disables button when disabled prop is true', () => {
    const wrapper = mount(AButton, {
      props: {
        disabled: true
      }
    })
    expect(wrapper.classes('select-none')).toBe(true)
    expect(wrapper.attributes('disabled')).toBeDefined()
  })

  it('emits click event when clicked', async () => {
    const wrapper = mount(AButton)
    await wrapper.find('button').trigger('click')
    expect(wrapper.emitted('click')).toBeTruthy()
  })

  it('renders slot content correctly', () => {
    const wrapper = mount(AButton, {
      slots: {
        default: 'Custom Button Text'
      }
    })
    expect(wrapper.text()).toContain('Custom Button Text')
  })
})