<script lang="ts">
  import FeatureReviews from "../../Logic/Web/MangroveReviews"
  import SingleReview from "./SingleReview.svelte"
  import { Utils } from "../../Utils"
  import StarsBar from "./StarsBar.svelte"
  import type { Review } from "mangrove-reviews-typescript"
  import Translations from "../i18n/Translations"
  import Tr from "../Base/Tr.svelte"
  import ReviewPrivacyShield from "./ReviewPrivacyShield.svelte"
  import ThemeViewState from "../../Models/ThemeViewState"
  import type { Store } from "../../Logic/UIEventSource"
  /**
   * An element showing all reviews
   */
  export let reviews: FeatureReviews
  export let state: ThemeViewState
  let average = reviews.average
  let allReviews: Store<
    (Review & {
      madeByLoggedInUser: Store<boolean>
    })[]
  > = reviews.reviews.map((r) => Utils.NoNull(r))
  let test = state.featureSwitches.featureSwitchIsTesting
  let debug = state.featureSwitches.featureSwitchIsDebugging
  let subject: Store<string> = reviews.subjectUri
</script>

<ReviewPrivacyShield {reviews} guistate={state.guistate}>
  <div class="border-2 border-dashed border-gray-300 p-2">
    {#if $allReviews.length > 1}
      <StarsBar score={$average} />
    {/if}
    {#if $allReviews.length > 0}
      {#each $allReviews as review}
        <SingleReview {review} />
      {/each}
    {:else}
      <div class="subtle m-2 italic">
        <Tr t={Translations.t.reviews.no_reviews_yet} />
      </div>
    {/if}
    <div class="flex justify-end">
      <a
        href={"https://mangrove.reviews" +
          ($allReviews.length == 0 ? "" : "/search?sub=" + encodeURIComponent($subject))}
        target="_blank"
        class="subtle text-sm"
      >
        <Tr t={Translations.t.reviews.attribution} />
      </a>
    </div>
    {#if $debug || $test}
      <span class="self-end">{$subject}</span>
    {/if}
  </div>
</ReviewPrivacyShield>
