<script lang="ts">
  /*
   * Visualises collection times for a single collection range
   */
  import { OH } from "../OpeningHours/OpeningHours"
  import type { OpeningRange } from "../OpeningHours/OpeningHours"

  import Translations from "../i18n/Translations"
  import Tr from "../Base/Tr.svelte"

  export let range: OpeningRange[][]
  const wt = Translations.t.general.weekdays
  const weekdays: Translation[] = [wt.sunday, wt.monday, wt.tuesday, wt.wednesday, wt.thursday, wt.friday, wt.saturday]
  let allTheSame = OH.weekdaysIdentical(range, 0, range.length - 1)
  let today = new Date().getDay()

  let dayZero = -1
  for (let i = 0; i < range.length; i++) {
    const moments = range[i]
    if (moments.length === 0) {
      continue
    }
    const moment = moments[0]
    const day = moment.startDate.getDay()
    dayZero = day - i
  }
  function isToday(i:number ){
    i = (i+dayZero) % 7
    return i === today
  }
</script>

{#if allTheSame && range[0]?.length > 0}
  <div class="flex justify-between">
    <slot />
    {#each range[0] as moment (moment)}
      <div class="ml-8">{moment.startDate.toLocaleTimeString()}</div>
    {/each}
  </div>
{:else if dayZero >= 0 } <!-- /*If dayZero == -1, then we got no valid values at all*/ -->
  {#each range as moments, i (moments)}
    <div class="flex gap-x-4 justify-between w-full px-2" class:interactive={isToday(i)} class:text-bold={isToday(i)} >
      <Tr t={weekdays[(i + dayZero) % 7]} />
      {#if range[i].length > 0}
        {#each moments as moment (moment)}
          <div class="ml-8">{moment.startDate.toLocaleTimeString()}</div>
        {/each}
      {:else}
          <Tr cls="italic subtle" t={Translations.t.general.points_in_time.closed}/>
      {/if}
    </div>
  {/each}
{/if}
