<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="w-full absolute block h-8" 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="block absolute top-0 m-0 h-full box-border ohviz-time-indication">
        <div
          style="left: -50%; word-break: initial;"
          class:border-opacity-50={!todayChangeMoments?.has(changeMoment)}
          class="relative h-fit bg-white pl-1 pr-1 h-3 font-sm rounded-xl border-2 border-black">
          {changeHourText[i]}
        </div>
      </div>
    {/if}
  {/each}
</div>
