<template>
  <q-uploader
    class="w-auto no-shadow interdepart-file-upload"
    :accept="extensions"
    :disable="disable"
    ref="uploaderRef"
    @rejected="onRejected"
    @added="onAdded"
    @removed="$emit('removed')"
  >
    <template v-slot:header="scope">
      <q-btn v-if="!scope.files.length" round dense flat class="upload-btn">
        <svg
          class="upload-btn__upload-icon"
          width="10"
          height="11"
          viewBox="0 0 10 11"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M5 0.5C5.27615 0.5 5.5 0.723858 5.5 1V6.22672L6.80027 4.82643C6.98817 4.62407 7.30454 4.61236 7.5069 4.80026C7.70925 4.98816 7.72097 5.30453 7.53307 5.50688L5.3664 7.84021C5.27179 7.9421 5.13904 7.99999 5 7.99999C4.86097 7.99999 4.72821 7.9421 4.63361 7.84021L2.46694 5.50688C2.27904 5.30453 2.29076 4.98816 2.49311 4.80026C2.69547 4.61236 3.01183 4.62407 3.19973 4.82643L4.5 6.22672V1C4.5 0.723858 4.72386 0.5 5 0.5ZM0.5 6.83332C0.776142 6.83332 1 7.05718 1 7.33332V8.00001C1 8.82846 1.67157 9.50001 2.5 9.50001H7.49998C8.32844 9.50001 8.99998 8.82847 8.99998 8.00001V7.33332C8.99998 7.05718 9.22384 6.83332 9.49998 6.83332C9.77612 6.83332 9.99998 7.05718 9.99998 7.33332V8.00001C9.99998 9.38075 8.88073 10.5 7.49998 10.5H2.5C1.1193 10.5 0 9.38076 0 8.00001V7.33332C0 7.05718 0.223858 6.83332 0.5 6.83332Z"
            fill="#1491CF"
          />
        </svg>
        {{ title }}
        <q-uploader-add-trigger />
      </q-btn>
    </template>
    <template v-slot:list="scope">
      <q-list separator v-if="!removeAfterAdding">
        <q-item v-for="file in scope.files" :key="file.__key">
          <q-item-section>
            <q-item-label class="full-width ellipsis">
              {{ file.name }}
            </q-item-label>
          </q-item-section>

          <q-item-section v-if="file.__img" thumbnail class="gt-xs">
            <img :src="file.__img.src" />
          </q-item-section>

          <q-item-section top side>
            <q-btn
              flat
              dense
              round
              class="gt-xs"
              size="12px"
              icon="delete"
              @click="scope.removeFile(file)"
            />
          </q-item-section>
        </q-item>
      </q-list>
    </template>
  </q-uploader>
</template>

<script lang="ts">
import { notifyError, notifyInfo, notifySuccess } from '@/utils/notify';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { QUploader } from 'quasar';

type UploaderRef = InstanceType<typeof QUploader>;

@Component
export default class AddFileButton extends Vue {
  @Prop() title!: string;
  @Prop() disable: boolean;
  @Prop() extensions: string;
  @Prop() removeAfterAdding: boolean;

  public onRejected(rejectedEntries: any) {
    notifyError(
      `${rejectedEntries.length} ${this.$t(
        'services.emulation.error.filesDidNotPass'
      )}`
    );
  }

  get uploaderRef(): UploaderRef {
    return this.$refs.uploaderRef as UploaderRef;
  }

  public onAdded(files: File[]) {
    if (this.removeAfterAdding) {
      this.uploaderRef.reset();
      notifyInfo(this.$tc('base.messages.fileReadSuccess'));
    }

    this.$emit('added', files[0]);
  }
}
</script>

<style>
.white-space-normal {
  white-space: normal;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.width-max-content {
  width: max-content;
}

.w-auto {
  width: auto;
}

.interdepart-file-upload {
  border-radius: 24px;
}

.interdepart-file-upload > .q-uploader__list {
  min-height: auto;
  padding: 0;
}

.interdepart-file-upload > .q-uploader__header {
  border-radius: inherit;
  background: transparent;
}

.interdepart-file-upload > .q-uploader__header::before {
  background: transparent;
}

.upload-btn {
  border: 1px solid rgba(1, 72, 116, 0.18);
  box-sizing: border-box;
  border-radius: 24px;
  color: #107abc;
  padding: 4px 12px;
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-transform: none;
}

.upload-btn__upload-icon {
  margin-right: 12px;
}

.code-wrapper {
  width: 75%;
}

.code-textarea {
  background-color: #eeeeee;
  word-break: normal;
  word-wrap: normal;
  overflow: auto;
  white-space: pre;
  width: 95%;
  height: 400px;
  opacity: 1 !important;
  color: black;
  cursor: default !important;
}
</style>