<template>
  <div :class="status">
    <div class="wrapper-image">
      <button
        :class="[{ selected }, 'button-image-item']"
        :disabled="status === 'waiting-for-process'"
        type="button"
        @click="$emit('trigger')"
      >
        <div
          v-if="status.length && (status === 'ready' || status === 'hidden')"
          class="photo-img-wrapper"
        >
          <i v-if="status === 'hidden'" class="bi bi-eye-slash icon-hidden"></i>
          <img
            v-if="href"
            loading="lazy"
            :src="href"
            alt=""
            class="photo-img"
          />
        </div>
        <div
          v-else-if="status.length && status === 'broken'"
          class="waiting-wrapper error"
        >
          <i class="bi bi-exclamation-octagon icon-waiting"></i>
          <span class="waiting info">{{ $t('pages.sequence.broken') }}</span>
        </div>
        <div v-else class="waiting-wrapper">
          <i class="bi bi-card-image icon-waiting"></i>
          <span class="waiting info">{{
            $t('pages.sequence.waiting_process')
          }}</span>
        </div>
        <div
          v-if="selectedOnMap && !selected"
          class="icon-img pointer-map"
        ></div>
        <div v-if="selected && !selectedOnMap" class="icon-img button-check">
          <i class="bi bi-check-lg" />
        </div>
        <div
          v-if="selected && selectedOnMap"
          class="icon-img button-check-pointer"
        >
          <i class="bi bi-check-lg" />
        </div>
        <div
          v-if="status.length && (status === 'ready' || status === 'hidden')"
          class="photo-info"
        >
          <span v-if="created" class="info"
            ><i class="bi bi-clock"></i> {{ created }}</span
          >
          <div class="button-info">
            <Link
              look="button button--white-blue no-text"
              icon="bi bi-cloud-download-fill"
              type="external"
              target="_blank"
              :path-external="hrefHd"
            />
          </div>
        </div>
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Link from '@/components/Link.vue'

defineProps({
  created: { type: String, default: null },
  href: { type: String, default: null },
  hrefHd: { type: String, default: null },
  selected: { type: Boolean, default: false },
  selectedOnMap: { type: Boolean, default: false },
  status: {
    type: String,
    validator: (value: string): boolean =>
      ['waiting-for-process', 'ready', 'hidden', 'broken', ''].includes(value),
    default: ''
  }
})
</script>

<style lang="scss" scoped>
.button-image-item {
  background-color: transparent;
  border: none;
  width: 100%;
  padding: 0;
  position: relative;
}
.selected {
  border: toRem(0.1) solid var(--blue);
  border-radius: toRem(0.5);
  box-shadow: 0px 4px 4px 0px #00000040;
}
.wrapper-image {
  display: flex;
}
.photo-img-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: toRem(0.5);
  border-top-left-radius: toRem(0.5);
  height: toRem(16);
  width: 100%;
  object-fit: cover;
}
.photo-img {
  height: 100%;
  width: 100%;
  border-radius: toRem(0.5);
}
.icon-hidden {
  color: var(--grey-dark);
  position: absolute;
  font-size: toRem(4);
}
.waiting-wrapper {
  height: toRem(16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--blue);
  margin-right: toRem(1);
  margin-left: toRem(1);
  &.error {
    color: var(--red);
  }
}
.icon-waiting {
  font-size: toRem(3);
  margin-bottom: toRem(1);
}
.waiting-info {
  text-align: center;
  color: var(--black);
  width: fit-content;
}

.info {
  @include text(xs-r-regular);
  padding: toRem(0.5) toRem(0.8);
  background-color: var(--white);
  border-radius: toRem(0.5);
}
.icon-img {
  top: toRem(1);
  right: toRem(1);
  background-color: var(--white);
  border-radius: 50%;
  position: absolute;
  height: toRem(2);
  width: toRem(2);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: toRem(1.3);
}
.pointer-map,
.button-check-pointer {
  background-color: var(--orange);
}
.delete-checked {
  opacity: 1;
}
.photo-info {
  height: toRem(5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: toRem(1);
  position: absolute;
  bottom: 0;
  width: 100%;
}

.button-image-item:hover {
  .photo-img {
    opacity: 0.5;
  }
}

.hidden {
  .photo-img,
  .info {
    opacity: 0.3;
  }
  &:hover {
    .photo-img,
    .info {
      opacity: 1;
    }
  }
}
</style>
