<script lang="ts">
  /**
   * A single bar in the Opening-Hours visualisations table, eventually with a text
   */
  export let availableArea: number
  export let earliestOpen: number
  export let latestclose: number
  export let range: {
    isOpen: boolean
    isSpecial: boolean
    comment: string
    startDate: Date
    endDate: Date
  }
  export let isWeekstable: boolean

  let textToShow = range.comment ?? (isWeekstable ? "" : range.startDate.toLocaleDateString())
  let startOfDay: Date = new Date(range.startDate)
  startOfDay.setHours(0, 0, 0, 0)
  let startpoint = (range.startDate.getTime() - startOfDay.getTime()) / 1000 - earliestOpen
  // prettier-ignore
  let width = (100 * (range.endDate.getTime() - range.startDate.getTime()) / 1000) / availableArea
  let startPercentage = (100 * startpoint) / availableArea
</script>

{#if !range.isOpen && !range.isSpecial}
  <div class="ohviz-day-off">{textToShow}</div>
{:else}
  <div class="ohviz-range" style={`left:${startPercentage}%; width:${width}%`}>{textToShow}</div>
{/if}
