<template>
  <div class="ws-state-file-item">
    <v-progress-circular
      v-if="loading"
      color="primary"
      indeterminate
    >{{percent}}</v-progress-circular>
    <template v-else>
      <a
        class="ws-state-file-item__link"
        :href="url"
        target="_blank"
      >{{$_getFileNameFromUrl(url)}}</a>
      <v-btn
        v-if="updatable"
        icon
        @click.stop="$_onRemoveClick()"
        class="ws-state-file-item__icon mr-3 textPrimary--text"
      >
        <v-icon>mdi-close-circle</v-icon>
      </v-btn>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    updatable: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    percent: {
      type: Number,
      default: 0
    },
    url: {
      type: String,
      default: null
    }
  },
  methods: {
    $_onRemoveClick() {
      this.$emit("remove");
    },
    $_handleUploadProgress(progressEvent) {
      this.uploadPercent = Math.round(
        (progressEvent.loaded / progressEvent.total) * 100
      );
    },
    $_getFileNameFromUrl(url) {
      if (!url) {
        return null;
      }
      return decodeURIComponent(url)
        .split("?")[0]
        .split("/")
        .pop();
    }
  }
};
</script>