<template>
  <section :class="['information-section', { 'first-sequence': index === 0 }]">
    <div class="uploaded-pictures">
      <p v-if="index === 0" class="title-current-upload">
        {{ $t('pages.upload.sequence_uploading_title') }}
      </p>
      <p v-if="sequence.pictures" class="uploaded-title">
        <span
          >{{ $t('pages.upload.import') }} {{ sequence.title }} -
          {{ sequence.pictures.length }}/{{ sequence.pictureCount }}</span
        >
      </p>
      <ul class="uploaded-picture-list">
        <PictureItem
          v-for="picture in uploadPictures"
          :text="$t('pages.upload.uploaded_word')"
          :name="picture.name"
          look="success"
        >
          <i class="bi bi-check-circle"></i>
        </PictureItem>
      </ul>
      <div v-if="sequence.id" class="wrapper-button-sequence">
        <Link
          :text="$t('pages.upload.sequence_link')"
          look="button button--white"
          target="_blank"
          :route="{ name: 'sequence', params: { id: sequence.id } }"
        />
      </div>
    </div>
    <div class="errors-pictures">
      <p v-if="uploadErrors.length" class="uploaded-title">
        {{ uploadErrors.length }} {{ $t('pages.upload.error_word') }}
      </p>
      <ul class="uploaded-error-list">
        <PictureItem
          v-for="error in uploadErrors"
          :text="error.message"
          :name="error.name"
          look="error"
        />
      </ul>
    </div>
  </section>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import Link from '@/components/Link.vue'
import PictureItem from '@/components/upload/PictureItem.vue'
import type { uploadErrorInterface } from '@/views/interfaces/UploadPicturesView'
defineProps({
  index: { type: Number, default: 0 },
  sequence: { type: Object, default: {} },
  picturesCount: { type: Number, default: null },
  uploadErrors: {
    type: Array as PropType<uploadErrorInterface[]>,
    default: []
  },
  uploadPictures: {
    type: Array as PropType<uploadErrorInterface[]>,
    default: []
  }
})
</script>

<style scoped lang="scss">
.information-section {
  display: flex;
  margin-bottom: toRem(4);
  padding-top: toRem(2);
  padding-bottom: toRem(2);
  width: 80%;
  box-shadow: 0px 6.45694px 8.60925px rgba(0, 0, 0, 0.05);
}
.first-sequence {
  background-color: var(--blue-pale);
  border-radius: toRem(0.5);
}
.uploaded-pictures,
.errors-pictures {
  width: 50%;
}
.title-current-upload {
  margin-bottom: toRem(2);
  @include text(m-regular);
  color: var(--blue-dark);
  margin-left: toRem(2);
}
.uploaded-title {
  margin-left: toRem(2);
  margin-bottom: toRem(2);
  width: 100%;
  color: var(--grey-semi-dark);
  font-weight: bold;
  @include text(s-regular);
}
.uploaded-picture-list {
  padding-left: 0;
}
.uploaded-picture-list,
.uploaded-error-list {
  padding: 0rem toRem(2) toRem(2);
  overflow-y: auto;
  max-height: toRem(35);
}
.bi-check-circle {
  color: var(--green);
  font-size: toRem(2);
}
.wrapper-button-sequence {
  padding-top: toRem(2);
  width: fit-content;
  margin: auto;
}
.errors-pictures {
  padding-left: toRem(2);
  padding-right: toRem(2);
  .uploaded-title {
    margin-top: toRem(4);
  }
}
@media (max-width: toRem(76.8)) {
  .uploaded-pictures,
  .errors-pictures {
    width: 100%;
    padding: 0;
  }
}
</style>
