/* eslint-env browser */

import statusPosterService from '../../services/status_poster/status_poster.service.js'
import TabSwitcher from '../tab_switcher/tab_switcher.jsx'

import { useEmojiStore } from 'src/stores/emoji.js'
import { useInstanceStore } from 'src/stores/instance.js'

const StickerPicker = {
  components: {
    TabSwitcher,
  },
  data() {
    return {
      meta: {
        stickers: [],
      },
      path: '',
    }
  },
  computed: {
    pack() {
      return useEmojiStore().stickers || []
    },
  },
  methods: {
    clear() {
      this.meta = {
        stickers: [],
      }
    },
    pick(sticker, name) {
      const store = this.$store
      // TODO remove this workaround by finding a way to bypass reuploads
      fetch(sticker).then((res) => {
        res.blob().then((blob) => {
          const file = new File([blob], name, { mimetype: 'image/png' })
          const formData = new FormData()
          formData.append('file', file)
          statusPosterService.uploadMedia({ store, formData }).then(
            (fileData) => {
              this.$emit('uploaded', fileData)
              this.clear()
            },
            (error) => {
              console.warn("Can't attach sticker")
              console.warn(error)
              this.$emit('upload-failed', 'default')
            },
          )
        })
      })
    },
  },
}

export default StickerPicker