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

describe('UModal', () => {
  let wrapper

  it('should open modal when isActive is true', async () => {
    wrapper = mount(UModal, {
      props: {
        isActive: true,
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.vm.isActive).toBe(true)
  })

  it('should render destructive modal correctly', async () => {
    const wrapper = mount(UModal, {
      props: {
        destructive: true,
        isActive: true,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render prependIcon correctly', async () => {
    const wrapper = mount(UModal, {
      props: {
        prependIcon: 'star6',
        iconColor: 'primary',
        isActive: true,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()

    const iconComponent = wrapper.findComponent({ name: 'UIcon' })
    expect(iconComponent.exists()).toBe(true)
    expect(iconComponent.props('icon')).toBe('$star6')
    expect(iconComponent.props('color')).toBe('primary-600')
  })

  it('should render text and supporting text correctly', async () => {
    const wrapper = mount(UModal, {
      props: {
        text: 'This is a text',
        supportingText: 'This is a supporting text',
        isActive: true,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render primaryButtonText and secondaryButtonText correctly', async () => {
    const wrapper = mount(UModal, {
      props: {
        primaryButtonText: 'primaryButtonText',
        secondaryButtonText: 'secondaryButtonText',
        isActive: true,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    const modalActionsComponent = wrapper.findComponent({
      name: 'UModalActions',
    })
    expect(modalActionsComponent.exists()).toBe(true)
    expect(modalActionsComponent.props('primaryButtonText')).toBe(
      'primaryButtonText'
    )
    expect(modalActionsComponent.props('secondaryButtonText')).toBe(
      'secondaryButtonText'
    )
  })

  it('should close modal when clicking on close button', async () => {
    const wrapper = mount(UModal, {
      props: {
        isActive: true,
        'onUpdate:isActive': (e) => {
          wrapper.setProps({ isActive: e })
        },
        unclosable: false,
      },
    })

    const closeButton = wrapper.find('.close')
    await closeButton.trigger('click')

    expect(wrapper.emitted()).toHaveProperty('update:isActive')
    expect(wrapper.emitted()).toHaveProperty('close')
    expect(wrapper.props('isActive')).toBe(false)
  })

  it('close btn should be hidden when unclosable == true', async () => {
    const wrapper = mount(UModal, {
      props: {
        isActive: true,
        unclosable: true,
      },
    })
    const closeButton = wrapper.find('.close')
    expect(closeButton.exists()).toBe(false)
  })

  it('should close modal when unclosable == false', async () => {
    const wrapper = mount(UModal, {
      props: {
        isActive: true,
        'onUpdate:isActive': (e) => {
          wrapper.setProps({ isActive: e })
        },
        unclosable: false,
      },
    })
    const modalContainer = wrapper.find('.modal-container')
    await modalContainer.trigger('click')

    expect(wrapper.props('isActive')).toBe(false)
  })

  it('should not close modal when unclosable == true', async () => {
    const wrapper = mount(UModal, {
      props: {
        isActive: true,
        'onUpdate:isActive': (e) => {
          wrapper.setProps({ isActive: e })
        },
        unclosable: true,
      },
    })
    const modalContainer = wrapper.find('.modal-container')
    await modalContainer.trigger('click')

    expect(wrapper.props('isActive')).toBe(true)
  })
})