<template>
    <div >
      <p v-if="errors">
           {{errorMessage}}
      </p>
      <label class="uploader__label">
        {{this.title}}
      </label>
        <!-- <img class="uploader__img" v-if="url" :src="url" /> -->
      <button
        :loading="uploading"
        :disabled="uploading"
        class="button button--orange"
        @click.prevent="$refs.file.click()"
        :class="success ? 'finished': ''"
      >


        <div v-if="uploading" class="lds-ring"><div></div><div></div><div></div><div></div></div>


      {{ success ? "Upload Successful " : "Upload a Video" }}
      </button>
        <input type="file" id="file" ref="file" v-on:change="onFileChange()" hidden/>
    </div>
</template>
<script>
  var parseString = require('xml2js').parseString
  import axios from 'axios'
  var instance = axios.create()
  // delete instance.defaults.headers.common.Authorization

  export default {
    props: ['files', 'title', 'value'],
    data () {
      return {
        file: '',
        path: null,
        policy: null,
        direct_url: null,
        success: false,
        errors: false,
        uploading: false,
        errorMessage: null
      }
    },
    watch: {
      errors() {
        this.uploading = false
      },
      success() {
        this.uploading = false
      },
    },
    computed: {
      url() {
        if(this.file && this.success) {
          return URL.createObjectURL(this.file)
        } else if(this.value) {
          return this.value
        }
        return null
      }
    },
    methods: {
        setFormData() {
          let policy = this.policy
          if(policy) {
            var formData = new FormData()
            formData.append('key', policy.key)
            formData.append('Content-Type', this.file.type)
            formData.append('success_action_status', policy.success_action_status)
            formData.append('policy', policy.policy)
            formData.append('acl', policy.acl)
            formData.append('x-amz-credential', policy['x-amz-credential'])
            formData.append('x-amz-algorithm', policy['x-amz-algorithm'])
            formData.append('x-amz-date', policy['x-amz-date'])
            formData.append('x-amz-signature', policy['x-amz-signature'])
            formData.append('file', this.file)
            return formData
          } else {
            throw 'No Policy found. Make sure you have generated a secure URL'
          }
        },
        markSuccess() {
          this.success = true
            this.errors = false
            //this.value = this.path
            this.$emit('input', this.path)
        },
        async saveFileTos3(formData) {
          try {
              let awsResponse = await fetch(this.direct_url, {
                  method: 'post',
                  body: formData,
              })
              //let awsResponse = await instance.post(this.direct_url, formData)

              let xml = await awsResponse.text()

              parseString(xml, (err, result) => {
                console.log(result)
                if(!err) {
                  this.path = result.PostResponse.Key[0]
                  this.markSuccess()
                }
              })
          } catch(err) {
            throw "Upload Failed. Make sure the file is a valid video file (.mp4, .mov, .avi)"
          }
        },
        async getPolicy() {
          try {
            let signedUrl = await axios.post('/api/public/upload-url', {
              name: this.file.name,
              content_type: this.file.type
            })
            this.policy = signedUrl.data.data.url_fields
            this.direct_url = signedUrl.data.data.direct_url
          } catch(err) {
            throw "Api failed to generate a valid upload URL. Please Verify that proper ENV files are configued"
          }
        },
        async onFileChange(){
          try {
            this.uploading = true
            this.file = this.$refs.file.files[0]
            if (this.file) {
              await this.getPolicy()
                let formData = this.setFormData()
                await this.saveFileTos3(formData)
            } else {
              throw 'No file'
            }
          } catch(err) {
            this.errors = true
            this.errorMessage = err
            console.log(err)
          }
        }
     },
  }
</script>
<style lang="scss" >
.button {
  margin: 0 auto;
  position: relative;
}

.button.finished {
  background: $shred-black;
  border: 3px solid $shred-black;
  color: $shred-white;
}
.uploader__img{
  display: block;
  max-width: 135px;
  padding-left: 10px;
}
.uploader__label {
  padding-left: 10px;
  display: block;
}

.lds-ring {
  display: inline-block;
  position: absolute;
  width: 21px;
  height: 21px;
  top: 45%;
  transform: translateY(-50%);
  left: 5px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 21px;
  height: 21px;
  margin: 2px;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>