import { it, describe, expect, vi } from 'vitest'
import { shallowMount, mount, flushPromises } from '@vue/test-utils'
import UploadPicturesView from '../../../views/UploadPicturesView.vue'
import { createRouter, createWebHistory } from 'vue-router'
import i18n from '../config'
import InputUpload from '../../../components/InputUpload.vue'
import * as createAPictureToASequence from '@/views/utils/upload/request'
import * as createASequence from '@/views/utils/upload/request'
import { formatDate } from '../../../utils/dates'
import * as sortByName from '../../../views/utils/upload/index'
const router = createRouter({
  history: createWebHistory(),
  routes: []
})
describe('Template', () => {
  it('should render the view with the input upload and the good wordings', () => {
    const wrapper = shallowMount(UploadPicturesView, {
      global: {
        plugins: [i18n, router],
        mocks: {
          $t: (msg) => msg
        }
      }
    })
    expect(wrapper.html()).contains('pages.upload.title')
    expect(wrapper.html()).contains('<input-upload-stub')
    expect(wrapper.html()).contains('pages.upload.input_label')
    expect(wrapper.html()).contains('<button-stub')
    expect(wrapper.html()).contains('text="pages.upload.button_text"')
  })
  describe('trigger addPictures', () => {
    it('should trigger to add pictures', async () => {
      const wrapper = shallowMount(UploadPicturesView, {
        global: {
          plugins: [i18n, router],
          mocks: {
            $t: (msg) => msg
          },
          components: {
            InputUpload
          }
        }
      })
      const spy = vi.spyOn(wrapper.vm, 'addPictures')
      const sortByNameMock = vi.spyOn(sortByName, 'sortByName')
      sortByNameMock.mockReturnValue([{}, {}])
      const wrapperInputUpload = await wrapper.findComponent(InputUpload)
      await wrapperInputUpload.trigger('trigger')
      await wrapperInputUpload.vm.$emit('trigger', [{}, {}])
      expect(spy).toHaveBeenCalledTimes(1)
      expect(wrapper.html()).contains('2 fichiers')
    })
    describe('submit uploadPicture', () => {
      it('should trigger to uploadPictures', async () => {
        const wrapper = mount(UploadPicturesView, {
          global: {
            plugins: [i18n, router],
            mocks: {
              $t: (msg) => msg
            },
            components: {
              InputUpload
            }
          }
        })
        const spy = vi.spyOn(wrapper.vm, 'uploadPicture')
        const wrapperInputUpload = wrapper.findComponent(InputUpload)
        await wrapperInputUpload.trigger('trigger')
        await wrapperInputUpload.vm.$emit('trigger', [{}, {}])
        const buttonWrapper = await wrapper.find('[data-test="button-upload"]')
        await buttonWrapper.trigger('submit.prevent')

        expect(spy).toHaveBeenCalledTimes(1)
        expect(wrapper.html()).contains('class="loader-percentage"')
        expect(wrapper.html()).contains('class="lds-ring lg"')
      })
    })
    describe('one sequence has been imported', () => {
      it('should render a sequence with a list of uploaded pictures', async () => {
        const wrapper = mount(UploadPicturesView, {
          global: {
            plugins: [i18n, router],
            mocks: {
              $t: (msg) => msg
            }
          }
        })
        const picture = {
          lastModified: 1599133968750,
          name: '100MSDCF_DSC02790.JPG',
          size: 2345,
          type: 'image/jpeg'
        }
        const spyASequence = vi.spyOn(createASequence, 'createASequence')
        const spyPicture = vi.spyOn(
          createAPictureToASequence,
          'createAPictureToASequence'
        )
        const sortByNameMock = vi.spyOn(sortByName, 'sortByName')
        sortByNameMock.mockReturnValue([picture])
        const sequenceId = 'my-id'
        spyASequence.mockReturnValue({ data: { id: sequenceId } })
        spyPicture.mockReturnValue({ data: {} })
        const sequenceTitle = `Séquence du ${formatDate(
          new Date(),
          'Do MMMM YYYY, HH:mm:ss'
        )}`
        const body = new FormData()
        body.append('position', '1')
        body.append('picture', picture)
        const wrapperInputUpload = wrapper.findComponent(InputUpload)
        await wrapperInputUpload.trigger('trigger')
        await wrapperInputUpload.vm.$emit('trigger', [picture])
        const buttonWrapper = await wrapper.find('[data-test="button-upload"]')
        await buttonWrapper.trigger('submit.prevent')

        expect(spyASequence).toHaveBeenCalledWith(sequenceTitle)
        expect(spyPicture).toHaveBeenCalledWith(sequenceId, body)

        expect(wrapper.html()).contains('class="uploaded-picture-list"')
        expect(wrapper.html()).contains('class="uploaded-picture-item success"')
        expect(wrapper.html()).contains(
          '100MSDCF_DSC02790.JPG - pages.upload.uploaded_word'
        )
        expect(wrapper.html()).contains('<router-link')
        expect(wrapper.html()).contains(
          'class="default button button--white" title="pages.upload.sequence_link"'
        )
      })
    })
  })
})
