<template>
  <svg v-if="value1 && value2" viewBox="0 0 195 110" xmlns="http://www.w3.org/2000/svg" class="o-bar-chart"
    role="graphics-document document">
    <title>{{ localeTitle }}</title>
    <!-- Vertical grid lines -->
    <line y2="100" x2="0.5" x1="0.5" stroke-width="1" />
    <!-- Horizontal grid lines -->
    <line x1="195" y2="100.5" y1="100.5" stroke-width="1" />
    <!-- Bars -->
    <g transform="translate(0, 100) scale(1, -1)">
      <rect class="o-bar-chart__bar-value" x="34" y="0" width="40" height="100" />
      <rect class="o-bar-chart__bar-value" x="120" y="0" width="40" height="100" />
      <rect class="o-bar-chart__bar" x="34" y="0" width="40" :height="value1">
        <animate v-if="animation1" attributeName="height" from="0" :to="value1" dur="2s" />
      </rect>
      <rect class="o-bar-chart__bar" x="120" y="0" width="40" :height="value2">
        <animate v-if="animation2" attributeName="height" from="0" :to="value2" dur="2s" />
      </rect>
    </g>
    <!-- Text on bars -->
    <text class="o-bar-chart__text-value" x="54" :y="100 - value1" dy="1" font-size="9"
      :dominant-baseline="value1 > 10 ? 'hanging' : 'ideographic'" text-anchor="middle">
      <animate v-if="animation1" attributeName="y" from="100" :to="100 - value1" dur="2s" />
      {{ value1 }}{{ unit1 }}
    </text>
    <text class="o-bar-chart__text-value" x="140" :y="100 - value2" dy="1" font-size="9"
      :dominant-baseline="value2 > 10 ? 'hanging' : 'ideographic'" text-anchor="middle">
      <animate v-if="animation2" attributeName="y" from="100" :to="100 - value2" dur="2s" />
      {{ value2 }}{{ unit1 }}
    </text>
    <!-- Text bellow bars -->
    <text v-if="year1" x="54" y="109" font-size="9" text-anchor="middle">{{ year1 }}</text>
    <text v-if="year2" x="140" y="109" font-size="9" text-anchor="middle">{{ year2 }}</text>
  </svg>

  <!-- Single bar -->
  <svg v-else-if="value1" viewBox="0 0 195 110" xmlns="http://www.w3.org/2000/svg" class="o-bar-chart">
    <!-- Vertical grid lines -->
    <line y2="100" x2="0.5" x1="0.5" stroke-width="1" />
    <!-- Horizontal grid lines -->
    <line x1="195" y2="100.5" y1="100.5" stroke-width="1" />
    <!-- Bars -->
    <g transform="translate(0, 100) scale(1, -1)">
      <rect class="o-bar-chart__bar-value" x="77.5" y="0" width="40" height="100" />
      <rect class="o-bar-chart__bar" x="77.5" y="0" width="40" :height="value1" fill="transparent">
        <animate v-if="animation1" attributeName="height" from="0" :to="value1" dur="2s" />
      </rect>
    </g>
    <!-- Text on bars -->
    <text class="o-bar-chart__text-value" x="97.5" :y="100 - value1" dy="1" font-size="9"
      :dominant-baseline="value1 > 10 ? 'hanging' : 'ideographic'" text-anchor="middle">
      <animate v-if="animation1" attributeName="y" from="100" :to="100 - value1" dur="2s" />
      {{ value1 }}{{ unit1 }}
    </text>
    <!-- Text bellow bars -->
    <text v-if="year1" x="97.5" y="109" font-size="9" text-anchor="middle">{{ year1 }}</text>
  </svg>
</template>

<script setup lang="ts">

defineProps<{
  value1: number;
  value2?: number;
  unit1?: string;
  unit2?: string;
  year1?: number;
  year2?: number;
  animation1?: boolean;
  animation2?: boolean;
}>();

const locale = navigator.language.split('-')[0]
const localeTitle = locale === 'sv' ? 'Ett stapeldiagram' : 'A bar chart';

</script>