<template>
  <div
    class="l-w-full page-bg"
  >
    <div class="l-container l-flex l-flex-col l-items-center l-mx-auto l-py-12 l-px-6 md:l-px-0">
      <h1 class="l-text-center lg:l-text-left l-font-bold l-text-3xl lg:l-text-5xl l-text-gray-800 l-mb-5">
        See what our customers are saying
      </h1>
      <div
        v-show="loaded"
        class="l-flex l-items-center l-mb-8 lg:l-mb-16 l-text-2xl"
      >
        <span class="rating-star-color l-font-bold">{{ reviewScore }}</span>
        <FilledStar class="rating-star-color l-ml-1 l-mr-2 l-w-5 l-h-5" />
        <span class="rating-text-color">out of {{ totalReviews }} reviews</span>
      </div>
      <div class="l-mx-4 l-flex l-flex-col lg:l-flex-row l-items-start l-justify-center lg:l-mx-8 lg:l-h-72 xl:l-h-60 l-w-full">
        <PageCard
          v-for="(review, index) in currentReviews"
          :key="review.id"
          class="l-max-w-full lg:l-max-w-1/3 l-overflow-hidden l-transition"
          :class="{
            'l-mb-4 lg:l-mb-0 lg:l-mr-4': index < 2,
            'l-opacity-0 l-duration-500': transition.leaving,
          }"
          :review="review"
          :theme="theme"
        />
      </div>
      <ArrowNavigation
        v-show="loaded"
        class="l-mt-10"
        :currentIndex="currentIndex"
        :totalReviews="totalReviews"
        :theme="theme"
        @previous="previous"
        @next="next"
      />
      <div class="l-mt-8 l-flex l-items-center l-flex-row">
        <p class="l-my-0 verified">Verified by</p>
        <a
          class="l-ml-2 l-no-underline"
          href="https://www.lauded.io"
          target="_blank"
        >
          <LaudedLogo class="l-h-8" />
        </a>
      </div>
    </div>
  </div>
</template>

<script setup="{ emit }">
import { computed, onMounted, ref, reactive } from 'vue'
import ArrowNavigation from './ArrowNavigation.vue'
import FilledStar from '@/assets/filled_star.svg'
import LaudedLogo from '@/assets/images/lauded.svg'
import StarRating from '../StarRating.vue'
import PageCard from './PageCard.vue'
import useReviews from '@/api/reviews'
import useWidgetSettings from '@/api/widget-settings'

const props = defineProps({
  apiKey: {
    type: String,
    required: true,
  },
  apiUrl: {
    type: String,
  }
})

const emit = defineEmits(['close'])

const { getPageSettings, theme } = useWidgetSettings()

const { getReviews, reviews, totalReviews } = useReviews()

const currentIndex = ref(0)
const currentPage = ref(3)

const loading = ref(true)
const loaded = ref(false)
const transition = reactive({
  leaving: false,
})

const baseApiUrl = computed(() => props.apiUrl ?? import.meta.env.VITE_API_URL)
const currentReviews = computed(() =>
  reviews.value?.slice(currentIndex.value, currentIndex.value + 3)
)

const reviewScore = computed(() =>
  reviews.length > 0 ? reviews[0].review_page?.companyRating : '5'
)

const ratingStarColor = computed(() => theme?.value?.rating_stars_color)
const ratingTextColor = computed(() => theme?.value?.rating_text_color)

const previous = () => {
  if (currentIndex.value > 0) {
    transition.leaving = true
    setTimeout(() => {
      currentIndex.value -= 3
      transition.leaving = false
    }, 500)
  }
}

const loadReviews = async (page) => {
  loading.value = true
  try {
    await getReviews(page, props.apiKey, baseApiUrl.value)
    loaded.value = true
  } finally {
    loading.value = false
  }
}

const next = () => {
  transition.leaving = true
  setTimeout(() => {
    if (currentIndex.value + 3 < totalReviews.value) {
      currentIndex.value += 3
    }
    if (currentIndex.value + 3 > reviews.value.length - 10) {
      const pageToRetrieve = currentPage.value
      getReviews(pageToRetrieve, props.apiKey, baseApiUrl.value)
      currentPage.value++
    }
    transition.leaving = false
  }, 500)
}

onMounted(async () => {
  const themeData = await getPageSettings(props.apiKey, baseApiUrl.value)
  theme.value = themeData
  await loadReviews(1)
  getReviews(2, props.apiKey, baseApiUrl.value)
})
</script>

<style scoped>
.rating-star-color {
  color: v-bind(theme?.rating_stars_color);
}
.rating-text-color {
  color: v-bind(theme?.rating_text_color);
}
.verified {
  color: v-bind(theme?.verified_by_lauded_text_color)
}
</style>