<template>
  <div class="FileLoader">
    <div
      :class="{ dragging: 'FileLoader-DragDropUploader__Dragging' }"
      class="FileLoader-DragDropUpload"
      @click="clickInput"
      @dragleave="handleDragOver"
      @dragover="handleDragOver"
      @drop="handleFileSelect"
    >
      <label
        id="file-input-container"
        class="FileLoader-Label"
        for="file-input"
      >
        <q-icon class="FileLoader-LabelIcon" name="pgs-upload-cloud" />
        <span class="FileLoader-LabelText">Перетащите сюда файл</span>
        <span>или</span>
        <r-btn
          class="FileLoader-Button"
          color="primary"
          icon="pgs-import"
          label="Выберите файл"
          outline
        />
        <input
          id="file-input"
          ref="fileInput"
          :accept="supportedFile"
          :multiple="multiply"
          type="file"
          @change="handleFileInput"
        />
      </label>
    </div>
    <div v-if="results !== null" class="FileLoader-Result">
      <div
        v-for="(result, index) in results"
        :key="`${result.fileName}${getExtension(result)}-${index}`"
      >
        <div class="FileLoader-ResultFileBlock">
          <q-icon class="FileLoader-ResultIcon" name="pgs-document" />
          <div class="FileLoader-FileName">
            <div class="FileLoader-FileNameText">{{ result.fileName }}</div>
            <div class="FileLoader-FileNameInfo">
              <span class="FileLoader-FileNameSize">
                {{ formatBytes(result.fileSize) }}
              </span>
            </div>
          </div>
          <q-icon
            class="FileLoader-Delete"
            color="negative"
            name="pgs-delete"
            @click="deleteFile(index)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./index.ts" />

<style lang="scss" scoped>
.FileLoader {
  &-DragDropUpload {
    width: 100%;
    border: 1px dashed rgba(1, 72, 116, 0.18);
    background: rgba(38, 117, 166, 0.025);
    cursor: pointer;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    &__Dragging {
      background: rgba(38, 117, 166, 0.05);
      border: 1px dashed rgba(1, 72, 116, 0.3);
    }
  }
  &-Label {
    color: rgba(2, 12, 18, 0.58);
    font-size: 14px;
    line-height: 16px;
    font-family: 'Golos Text', sans-serif;
    height: 100%;
    pointer-events: none;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    > input {
      display: none;
    }
  }
  &-LabelText {
    font-size: 16px;
    line-height: 20px;
  }
  &-LabelIcon {
    font-size: 54px;
    color: rgba(2, 12, 18, 0.24);
  }
  &-Button {
    margin-top: 12px;
  }
  &-Result {
    font-family: 'Golos UI', sans-serif;
    color: rgba(2, 12, 18, 0.6);
    margin-top: 12px;
  }
  &-ResultFileBlock {
    display: flex;
    align-items: center;
    margin-top: 8px;
  }
  &-FileNameText {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    color: rgba(2, 12, 18, 0.9);
    align-self: end;
  }
  &-FileNameInfo {
    font-size: 12px;
    margin: 0;
    padding: 0;
  }
  &-FileName {
    flex-grow: 1;
    padding-right: 10px;
    padding-left: 4px;
  }
  &-FileNameText {
    color: rgba(2, 12, 18, 0.9);
  }
  &-ResultIcon {
    font-size: 32px;
    color: rgba(2, 12, 18, 0.7);
  }
  &-FileNameSize {
    padding-right: 5px;
  }
  &-Delete {
    cursor: pointer;
    font-size: 20px;
  }
}
</style>
