<template>
  <div id="file_modal" class="modal file-modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container" v-on-clickaway="() => $emit('clickaway')">
          <div class="modal-body">
            <div class="file-info-container">
              <div class="image">
                <div class="image-container">
                  <img :src="originalUrl" v-if="file.type === 'image' || file.type === 'video'" />
                </div>
              </div>
              <div class="info">
                <div class="file-info">
                  File type: {{ file.mime_type }}<br />
                  Uploaded on: {{ formatDateTime(file.created_at) }}<br />
                  <br />
                  File size: {{ formatFileSize(file.file_size) }}<br />
                  Dimensions: {{ file.width }} x {{ file.height }}<br />
                </div>
                <div class="inputs">
                  <div class="input-container input-url">
                    <input type="text" title="File URL" placeholder="URL" v-model="fileUrl" />
                  </div>
                  <div class="input-container input-name">
                    <input type="text" title="File Name" placeholder="Name" v-model="fileName" />
                  </div>
                  <div class="input-container input-caption">
                    <textarea title="File Caption" placeholder="Caption" v-model="fileCaption"></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="buttons-container">
              <a class="button dark-gray" @click="emitDelete()">Discard</a>
              <a class="button" @click="submit">Save</a>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import { mixin as clickaway } from 'vue-clickaway2';

  import { put } from '../helpers/api.js';

  export default {
    mixins: [ clickaway ],
    props: [ "file" ],
    data() {
      return {
        originalUrl: this.file.url,
        originalName: this.file.name,
        originalCaption: undefined,

        fileId: this.file.id,
      }
    },
    mounted() {
      this.initData();
    },
    computed: {
      fileUrl: {
        get() {
          return this.file.url;
        },
        set(val) {
          this.$emit('update-file', { prop: "url", value: val });
        }
      },
      fileName: {
        get() {
          return this.file.name;
        },
        set(val) {
          this.$emit('update-file', { prop: "name", value: val });
        }
      },
      fileCaption: {
        get() {
          const captionMeta = this.file.metas.find( function(meta) {
            return meta.key === "caption";
          });
          return (!!captionMeta) ? captionMeta.value : undefined;
        },
        set(val) {
          this.$emit('update-file', { prop: "caption", value: val });
        }
      }
    },
    methods: {
      initData() {
        const captionMeta = this.file.metas.find( function(meta) {
          return meta.key === "caption";
        });
        this.originalCaption = (!!captionMeta) ? captionMeta.value : undefined;
      },
      formatDateTime(string) {
        return this.$moment.utc(string).local().format('L');
      },
      formatFileSize(number) {
        return ((number/1024/1024) < 1) ? Math.round(number/1024) + " KB" : (number/1024/1024).toFixed(2) + " MB";
      },
      emitDelete() {
        this.$emit('delete');
      },

      submit() {
        const form_params = this.file;

        put('buildable_files/' + this.file.id, form_params, window.jwtToken)
          .then( (res) => {
            if (!!res && !!res.data && !!res.data.updated_file) {
              this.originalUrl = res.data.updated_file.url;
              this.originalName = res.data.updated_file.name;
              const captionMeta = res.data.updated_file.metas.find( function(meta) {
                return meta.key === "caption";
              });
              this.originalCaption = (!!captionMeta) ? captionMeta.value : undefined;

              this.$emit('update-file', { prop: 'metas', value: res.data.updated_file.metas });
            }
          })
          .catch( (err) => {
            console.log(err);
          });
      }
    }
  }
</script>
