import { nextTick } from 'vue'

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

import { useNotification } from './../../components'

const $useNotification = useNotification()

describe('UNotification render', async () => {
  let wrapper: any

  beforeEach(async () => {
    wrapper = mount(UNotification)
  })

  afterEach(() => {
    wrapper.unmount()
    $useNotification?.close()
  })

  it('should render as expected', async () => {
    const wrapper = mount(UNotification)
    const notify = () => {
      $useNotification?.run({
        title: 'network error',
        iconLeft: 'arrowLeft',
      })
    }
    notify()
    await nextTick()

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

describe('UNotification colors', () => {
  let wrapper: any

  beforeEach(async () => {
    wrapper = mount(UNotification)
  })

  afterEach(() => {
    wrapper.unmount()
    $useNotification?.close()
  })

  it('should render with a primary color', async () => {
    const notify = () => {
      $useNotification?.run({
        title: 'network error',
        color: 'primary',
        iconLeft: 'arrowLeft',
        iconTop: 'activity',
      })
    }
    notify()
    await nextTick()

    expect(wrapper.html()).toMatchSnapshot()
    const iconTop = wrapper.findAllComponents({ name: 'UIcon' })[1]
    const iconLeft = wrapper.findAllComponents({ name: 'UIcon' })[2]
    expect(iconTop.classes()).toContain('bg-primary-50')
    expect(iconLeft.classes()).toContain('bg-primary-50')
  })

  it('should render with a success color', async () => {
    const notify = () => {
      $useNotification?.run({
        title: 'network error',
        color: 'success',
        iconLeft: 'arrowLeft',
        iconTop: 'activity',
      })
    }
    notify()
    await nextTick()

    expect(wrapper.html()).toMatchSnapshot()
    const iconTop = wrapper.findAllComponents({ name: 'UIcon' })[1]
    const iconLeft = wrapper.findAllComponents({ name: 'UIcon' })[2]
    expect(iconTop.classes()).toContain('bg-success-50')
    expect(iconLeft.classes()).toContain('bg-success-50')
  })

  it('should render with a warning color', async () => {
    const notify = () => {
      $useNotification?.run({
        title: 'network error',
        color: 'warning',
        iconLeft: 'arrowLeft',
        iconTop: 'activity',
      })
    }
    notify()
    await nextTick()

    expect(wrapper.html()).toMatchSnapshot()
    const iconTop = wrapper.findAllComponents({ name: 'UIcon' })[1]
    const iconLeft = wrapper.findAllComponents({ name: 'UIcon' })[2]
    expect(iconTop.classes()).toContain('bg-warning-50')
    expect(iconLeft.classes()).toContain('bg-warning-50')
  })

  it('should render with a error color', async () => {
    const notify = () => {
      $useNotification?.run({
        title: 'network error',
        color: 'error',
        iconLeft: 'arrowLeft',
        iconTop: 'activity',
      })
    }
    notify()
    await nextTick()

    expect(wrapper.html()).toMatchSnapshot()
    const iconTop = wrapper.findAllComponents({ name: 'UIcon' })[1]
    const iconLeft = wrapper.findAllComponents({ name: 'UIcon' })[2]
    expect(iconTop.classes()).toContain('bg-error-50')
    expect(iconLeft.classes()).toContain('bg-error-50')
  })
})

describe('UNotification icons', () => {
  let wrapper: any

  beforeEach(async () => {
    wrapper = mount(UNotification)
  })

  afterEach(() => {
    wrapper.unmount()
    $useNotification?.close()
  })

  it('should render with a iconTop', async () => {
    const notify = () => {
      $useNotification?.run({
        title: 'network error',
        iconLeft: 'arrowLeft',
        iconTop: 'activity',
      })
    }
    notify()
    await nextTick()

    const wrapper = mount(UNotification)
    const iconTop = wrapper.findAll('path')[1]
    expect(iconTop.attributes('d')).toBe('M22 12H18L15 21L9 3L6 12H2')
  })

  it('should render with a iconLeft', async () => {
    const notify = () => {
      $useNotification?.run({
        title: 'network error',
        iconLeft: 'arrowLeft',
        iconTop: 'activity',
      })
    }
    notify()
    await nextTick()

    const iconTop = wrapper.findAll('path')[2]
    expect(iconTop.attributes('d')).toBe('M19 12H5M5 12L12 19M5 12L12 5')
  })
})

describe('UNotification positions', () => {
  let wrapper: any

  beforeEach(async () => {
    wrapper = mount(UNotification)
  })

  afterEach(() => {
    wrapper.unmount()
    $useNotification?.close()
  })

  it('should render correctly with a position topRight', async () => {
    const notify = () => {
      $useNotification?.run({
        title: 'network error',
        iconLeft: 'arrowLeft',
        position: 'topRight',
      })
    }
    notify()
    await nextTick()

    const wrapper = mount(UNotification)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with a position topLeft', async () => {
    const notify = () => {
      $useNotification?.run({
        title: 'network error',
        iconLeft: 'arrowLeft',
        position: 'topLeft',
      })
    }
    notify()
    await nextTick()

    const wrapper = mount(UNotification)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with a position bottomLeft', async () => {
    const notify = () => {
      $useNotification?.run({
        title: 'network error',
        iconLeft: 'arrowLeft',
        position: 'bottomLeft',
      })
    }
    notify()
    await nextTick()

    const wrapper = mount(UNotification)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with a position bottomRight', async () => {
    const notify = () => {
      $useNotification?.run({
        title: 'network error',
        iconLeft: 'arrowLeft',
        position: 'bottomRight',
      })
    }
    notify()
    await nextTick()

    const wrapper = mount(UNotification)
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('UNotification elevation classes', () => {
  let wrapper: any

  beforeEach(async () => {
    wrapper = mount(UNotification)
  })

  afterEach(() => {
    wrapper.unmount()
    $useNotification?.close()
  })

  it('should render correctly with a elevation none', async () => {
    const notify = () => {
      $useNotification?.run({
        iconLeft: 'activity',
        elevation: 'none',
      })
    }
    notify()
    await nextTick()

    const wrapper = mount(UNotification)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with a sm elevation', async () => {
    const notify = () => {
      $useNotification?.run({
        iconLeft: 'activity',
        elevation: 'sm',
      })
    }
    notify()
    await nextTick()

    const wrapper = mount(UNotification)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with a md elevation', async () => {
    const notify = () => {
      $useNotification?.run({
        iconLeft: 'activity',
        elevation: 'md',
      })
    }
    notify()
    await nextTick()

    const wrapper = mount(UNotification)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with a lg elevation', async () => {
    const notify = () => {
      $useNotification?.run({
        iconLeft: 'activity',
        elevation: 'lg',
      })
    }
    notify()
    await nextTick()

    const wrapper = mount(UNotification)
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('UNotification close', () => {
  it('should call close method', async () => {
    const wrapper = mount(UNotification)
    const notify = () => {
      $useNotification?.run({
        iconLeft: 'activity',
      })
    }
    notify()
    await nextTick()

    await wrapper.find('.close').trigger('click')
    expect($useNotification?.isActive.value).toBe(false)
  })
})

describe('UNotification delay', () => {
  let wrapper: any

  beforeEach(async () => {
    wrapper = mount(UNotification)
  })

  afterEach(() => {
    wrapper.unmount()
    $useNotification?.close()
  })

  it('should close the notification after 100ms', async () => {
    const notify = () => {
      $useNotification?.run({
        iconLeft: 'arrowLeft',
        delay: 200,
      })
    }
    notify()
    await nextTick()
    await wrapper.find('.close').trigger('click')
    await nextTick()

    expect($useNotification?.isActive.value).toBe(false)
  })

  it('should close the notification after 200ms', async () => {
    const notify = () => {
      $useNotification?.run({
        iconLeft: 'arrowLeft',
        delay: 100,
      })
    }
    notify()
    await nextTick()

    await wrapper.find('.close').trigger('click')
    await nextTick()

    expect($useNotification?.isActive.value).toBe(false)
  })
})