<template>
  <div class="window-areas-layer">
    <section
      v-for="slice in slices"
      :key="`${slice.area.id}-${slice.segmentIndex}-${slice.renderLeft}`"
      class="window-area"
      :style="{
        left: `${slice.renderLeft}px`,
        top: `${slice.renderTop}px`,
        width: `${slice.renderWidth}px`,
        height: `${slice.renderHeight}px`,
      }"
    >
      <div
        class="window-area-inner"
        :style="{
          width: `${slice.area.width}px`,
          height: `${slice.area.height}px`,
          transform: `translateX(${-slice.clipOffset}px)`,
        }"
      >
        <div class="window-no-region">
          <span
            class="window-no-text"
            :class="{ circle: slice.area.windowNumberCircle }"
            :style="{
              fontSize: `${slice.area.windowNumberStyle.fontSize}px`,
              color: slice.area.windowNumberStyle.color,
              fontWeight: slice.area.windowNumberStyle.fontWeight,
            }"
          >
            {{ slice.area.windowNumber }}
          </span>
        </div>
        <div class="window-text-region">
          <div
            class="window-text-line"
            :style="{
              fontSize: `${slice.area.staticTextStyle.fontSize}px`,
              color: slice.area.staticTextStyle.color,
              fontWeight: slice.area.staticTextStyle.fontWeight,
            }"
          >
            {{ slice.area.staticText }}
          </div>
          <div
            class="window-text-line"
            :style="{
              fontSize: `${slice.area.dynamicTextStyle.fontSize}px`,
              color: slice.area.dynamicTextStyle.color,
              fontWeight: slice.area.dynamicTextStyle.fontWeight,
            }"
          >
            {{ slice.area.dynamicText }}
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import type { WindowAreaSlice } from "../services/windowAreaSliceService";

defineProps<{
  slices: WindowAreaSlice[];
}>();
</script>
