<script lang="ts">
  import BaseUIElement from "../../BaseUIElement"
  import Combine from "../../Base/Combine"
  import { FixedUiElement } from "../../Base/FixedUiElement"

  /**
   * The element showing an "hour" in a bubble, above or below the opening hours table
   * Dumbly shows one row of what is given.
   *
   * Does not include lines
   */
  export let availableArea: number
  export let changeHours: number[]
  export let changeHourText: string[]
  export let earliestOpen: number
  export let todayChangeMoments: Set<number>

  function calcOffset(changeMoment: number) {
    return (100 * (changeMoment - earliestOpen)) / availableArea
  }
</script>

<div class="absolute block h-8 w-full" style="margin-top: -1rem">
  {#each changeHours as changeMoment, i}
    {#if calcOffset(changeMoment) >= 0 && calcOffset(changeMoment) <= 100}
      <div
        style={`left:${calcOffset(changeMoment)}%; margin-top: 0.1rem`}
        class="ohviz-time-indication absolute top-0 m-0 box-border block h-full"
      >
        <div
          style="left: -50%; word-break: initial;"
          class:border-opacity-50={!todayChangeMoments?.has(changeMoment)}
          class="font-sm relative h-3 h-fit rounded-xl border-2 border-black bg-white pl-1 pr-1"
        >
          {changeHourText[i]}
        </div>
      </div>
    {/if}
  {/each}
</div>
