<script lang="ts">

  import CollectionTimeRange from "./CollectionTimeRange.svelte"
  import opening_hours from "opening_hours"
  import { OH } from "../OpeningHours/OpeningHours"
  import Translations from "../i18n/Translations"
  import Tr from "../Base/Tr.svelte"

  export let times: opening_hours
  let monday = OH.getMondayBefore(new Date())
  let sunday = new Date()
  sunday.setTime(monday.getTime() + 7 * 24 * 60 * 60 * 1000)
  let ranges = OH.getRanges(times, monday, sunday)
  let weekdays = ranges.slice(0, 5)
  let weekend = ranges.slice(5, 7)
  let everyDaySame = OH.weekdaysIdentical(ranges, 0, ranges.length - 1)
  let weekdaysAndWeekendsSame = OH.weekdaysIdentical(weekdays, 0, 4) && OH.weekdaysIdentical(weekend, 0, 1)
  const t = Translations.t.general.points_in_time
</script>


<div class="m-4 border">

  {#if everyDaySame || !weekdaysAndWeekendsSame}
    <CollectionTimeRange range={ranges}>
      <Tr t={t.daily} />
    </CollectionTimeRange>
  {:else if times.isWeekStable()}
    <div class="flex flex-col w-fit">
      <CollectionTimeRange range={weekdays}>
        <Tr t={t.weekdays} />

      </CollectionTimeRange>
      <CollectionTimeRange range={weekend}>
        <Tr t={t.weekends} />

      </CollectionTimeRange>
    </div>
  {:else}
    {#each ranges as range (range)}
      {#if range.length > 0}
        <div class="flex justify-between">
          {range[0].startDate.toLocaleDateString()}
          <div class="flex gap-x-4">
            {#each range as moment}
              <div>
                {moment.startDate.toLocaleTimeString()}
              </div>
            {/each}
          </div>
        </div>
      {/if}
    {/each}
  {/if}
</div>
