<template>
  <div class="wrapper-loader">
    <div class="loader">
      <span class="loader-percentage">{{ loadPercentage }}</span>
      <Loader look="lg" :is-loaded="isLoaded" />
    </div>
    <div v-if="loadPercentage === '100%'" class="wrapper-button-new-upload">
      <Button
        :text="$t('pages.upload.button_new_upload')"
        look="button button--blue"
        @trigger="$emit('triggerNewUpload')"
      />
    </div>
    <div v-if="uploadedSequences[0]" class="loader-information">
      <span class="loader-title">{{ uploadPendingTitle }}</span>
      <span v-if="loadPercentage !== '100%'" class="loader-text">{{
        $t('pages.upload.upload_pending_pictures', { count: picturesCount })
      }}</span>
      <span class="loader-text-size"
        >{{ uploadedSequences[0].pictureSize }}/{{ loadTextSize }}
      </span>
      <span class="loader-text-warning">{{
        $t('pages.upload.leave_message')
      }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import Loader from '@/components/Loader.vue'
import Button from '@/components/Button.vue'
import { computed } from 'vue'
import type { PropType } from 'vue'
import type { sequenceInterface } from '@/views/interfaces/UploadPicturesView'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const props = defineProps({
  loadPercentage: { type: String, default: '0%' },
  loadTextSize: { type: String, default: '0 Mo' },
  isLoaded: { type: Boolean, default: false },
  uploadedSequences: {
    type: Array as PropType<sequenceInterface[]>,
    default: []
  },
  picturesCount: { type: Number, default: null }
})

const uploadPendingTitle = computed<string>(() => {
  if (props.loadPercentage !== '100%') return t('pages.upload.upload_pending')
  return t('pages.upload.upload_done')
})
</script>

<style scoped lang="scss">
.wrapper-loader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: toRem(4);
}
.loader {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader-percentage {
  width: toRem(10);
  position: absolute;
  text-align: center;
  @include text(h1);
  color: var(--blue);
}
.wrapper-button-new-upload {
  display: flex;
  justify-content: center;
}
.loader-information {
  margin-top: toRem(2);
  display: flex;
  flex-direction: column;
}
.loader-title,
.loader-text,
.loader-text-size {
  text-align: center;
  @include text(s-regular);
}
.loader-title {
  @include text(h2);
  margin-bottom: toRem(0.5);
}
.loader-text {
  color: var(--blue);
  border-bottom: toRem(0.1) solid var(--grey);
}
.loader-text-size {
  color: var(--grey-semi-dark);
}
.loader-text-warning {
  text-align: center;
  @include text(s-regular);
  color: var(--orange);
  margin-top: toRem(1);
  width: toRem(31);
}
</style>
