<template>
  <transition
    enter-active-class="l-transition l-ease-out l-duration-500"
    enter-from-class="l-opacity-0"
    enter-to-class="l-opacity-100"
    leave-active-class="l-transition l-ease-in l-duration-500"
    leave-from-class="l-opacity-100"
    leave-to-class="l-opacity-0"
  >
    <div
      v-if="review != null"
      class="bg l-shadow-widget l-rounded-lg l-w-full"
    >
      <div class="l-p-4">
        <div class="l-flex l-flex-row">
          <img class="l-rounded-full l-w-8 l-h-8 l-mr-4" :src="review.review_page.logo" />
          <div class="l-flex l-flex-col l-items-start">
            <div class="l-flex l-flex-row l-w-full l-justify-between">
              <!-- star rating / time ago -->
              <div class="l-flex l-flex-row">
                <StarRating
                  class="l-mr-2"
                  :color="theme.rating_stars_color"
                  :rating="review.rating"
                />
                <span class="l-font-medium l-text-xs date">
                  {{ review.date }}
                </span>
              </div>
              <CloseIcon class="l-text-gray-500 l-fill-current l-cursor-pointer" @click="close" />
            </div>
            <!-- summary of review -->
            <p class="heading l-mt-2 l-text-md l-font-semibold l-text-left">
              {{ review.heading }}
            </p>
            <p class="body l-mt-1 l-text-sm l-leading-5 l-text-left">
              {{ truncatedText }}
            </p>
            <!-- read more / verified tag -->
            <div class="l-flex l-flex-row l-w-full l-justify-between l-mt-3">
              <a class="l-text-sm read-full l-no-underline" target="_blank" :href="review.url">
                Read Full Review
              </a>
              <a class="l-my-0 l-text-sm verified" href="https://lauded.io" target="_blank">
                Verified by Lauded
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup="{ emit }">
import { onMounted, toRefs, computed, watch } from 'vue'
import StarRating from '../StarRating.vue'
import GrayStar from '../../assets/gray_star.svg'
import CloseIcon from '../../assets/close.svg'

const props = defineProps({
  review: Object,
  theme: Object,
})

const emit = defineEmits(['close', 'end'])

const truncatedText = computed(() => props.review?.review ?
  `${props.review.review.substring(0, 250)}...` : '')

const { review } = toRefs(props)

var timeout = null

const closeTimer = () => {
  if (!timeout) {
    timeout = setTimeout(() => {
      timeout = null
      emit('close');
    }, (Math.random() * 3000 | 0) + 4000)
  }
}

const close = () => {
  if (timeout) {
    clearTimeout(timeout)
  }
  emit('close')
}

onMounted(() => {
  closeTimer()
})

watch(() => props.review, (newReview, oldReview) => {
  if (newReview !== null) {
    closeTimer()
  }
})

</script>

<style scoped>
.bg {
  background-color: v-bind(theme.widget_background_color);
}
.body {
  color: v-bind(theme.body_text_color);
}
.heading {
  color: v-bind(theme.heading_text_color);
}
.date {
  color: v-bind(theme.date_text_color);
}
.read-full {
  color: v-bind(theme.read_full_review_text_color);
}
.verified {
  color: v-bind(theme?.verified_by_lauded_text_color)
}
</style>