import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { flushPromises } from '../../utils'
import ClosetItem from '@/components/user/ClosetItem'
import { swal } from '@/js/notify'

jest.mock('@/js/notify')

function factory(opt = {}) {
  return {
    tid: 1,
    name: 'texture',
    type: 'steve',
    ...opt,
  }
}

test('computed values', () => {
  const wrapper = mount(ClosetItem, { propsData: factory() })
  expect(wrapper.find('img').attributes('src')).toBe('/preview/1.png')
  expect(wrapper.find('a.more').attributes('href')).toBe('/skinlib/show/1')
})
test('selected item', () => {
  const wrapper = mount(ClosetItem, { propsData: factory({ selected: true }) })
  expect(wrapper.find('.item').classes('item-selected')).toBeTrue()
})
test('click item body', () => {
  const wrapper = mount(ClosetItem, { propsData: factory() })

  wrapper.find('.item').trigger('click')
  expect(wrapper.emitted().select).toBeUndefined()

  wrapper.find('.item-body').trigger('click')
  expect(wrapper.emitted().select).toBeTruthy()
})
test('rename texture', async () => {
  Vue.prototype.$http.post
    .mockResolvedValueOnce({ errno: 0 })
    .mockResolvedValueOnce({ errno: 1 })
  swal.mockImplementationOnce(() => ({ dismiss: 'cancel' }))
    .mockImplementation(options => {
      options.inputValidator('name')
      options.inputValidator()
      return { value: 'new-name' }
    })
  const wrapper = mount(ClosetItem, { propsData: factory() })
  const button = wrapper.findAll('.dropdown-menu > li').at(0)
    .find('a')

  button.trigger('click')
  await wrapper.vm.$nextTick()
  expect(Vue.prototype.$http.post).not.toBeCalled()

  button.trigger('click')
  await wrapper.vm.$nextTick()

  button.trigger('click')
  await flushPromises()
  expect(wrapper.find('.texture-name > span').text()).toBe('new-name (steve)')
  expect(Vue.prototype.$http.post).toBeCalledWith(
    '/user/closet/rename',
    { tid: 1, new_name: 'new-name' }
  )
})

test('remove texture', async () => {
  Vue.prototype.$http.post
    .mockResolvedValueOnce({ errno: 0 })
    .mockResolvedValueOnce({ errno: 1 })
  swal
    .mockResolvedValueOnce({ dismiss: 'cancel' })
    .mockResolvedValue({})

  const wrapper = mount(ClosetItem, { propsData: factory() })
  const button = wrapper.findAll('.dropdown-menu > li').at(1)
    .find('a')

  button.trigger('click')
  await wrapper.vm.$nextTick()
  expect(Vue.prototype.$http.post).not.toBeCalled()

  button.trigger('click')
  await wrapper.vm.$nextTick()

  button.trigger('click')
  await flushPromises()
  expect(wrapper.emitted()['item-removed']).toBeTruthy()
  expect(Vue.prototype.$http.post).toBeCalledWith('/user/closet/remove', { tid: 1 })
})
test('set as avatar', async () => {
  Vue.prototype.$http.post
    .mockResolvedValueOnce({ errno: 0 })
    .mockResolvedValueOnce({ errno: 1 })
  swal
    .mockResolvedValueOnce({ dismiss: 'cancel' })
    .mockResolvedValue({})
  window.$ = jest.fn(() => ({
    each(fn) {
      fn()
    },
    prop() {},
    attr() {
      return ''
    },
  }))

  const wrapper = mount(ClosetItem, { propsData: factory() })
  const button = wrapper.findAll('.dropdown-menu > li').at(2)
    .find('a')

  button.trigger('click')
  await wrapper.vm.$nextTick()
  expect(Vue.prototype.$http.post).not.toBeCalled()

  button.trigger('click')
  await wrapper.vm.$nextTick()

  button.trigger('click')
  await flushPromises()
  await wrapper.vm.$nextTick()
  expect(Vue.prototype.$http.post).toBeCalledWith('/user/profile/avatar', { tid: 1 })
  expect(window.$).toBeCalledWith('[alt="User Image"]')
})