<template>
  <div class="stats">
    <div
      v-for="stat in stats"
      :key="stat.value?.value"
      class="stats__element"
    >
      <div
        v-if="isValueVisible && stat.value?.value"
        class="stats__number"
      >
        {{ stat.value?.value }}
      </div>

      <div
        v-if="isCaptionVisible && stat.caption?.value"
        class="stats__caption"
      >
        {{ stat.caption?.value }}
      </div>
    </div>

    <Button
      v-if="isButtonVisible"
      class="stats__button"
      :design="buttonDesign"
      :content="buttonContent"
    />
  </div>
</template>

<script setup lang="ts">
import type { Card, InputBoxContent, ButtonContent } from '@lightspeed/crane';
import {
  useTextElementDesign,
  EditorTypes,
  useDeckElementContent,
  useButtonElementContent,
  useButtonElementDesign,
} from '@lightspeed/crane';
import { computed, CSSProperties } from 'vue';

import type { Content, Design } from '../type.ts';
import Button from '../../../shared/components/Button.vue';
import { useVisibilityProvider } from '../util/visibility-provider.ts';

const buttonContent = useButtonElementContent<Content>('button') as ButtonContent;
const buttonDesign = useButtonElementDesign<Design>('button') as ButtonDesignData;

const { isButtonVisible } = useVisibilityProvider();

const statsDesk = useDeckElementContent<Content>('stats');
const stats = computed(() => (
  statsDesk?.cards?.map((card: Card) => ({
    value: statsDesk.getReactiveRef(card, EditorTypes.INPUTBOX, 'stat_value') as unknown as InputBoxContent | undefined,
    caption: statsDesk.getReactiveRef(card, EditorTypes.INPUTBOX, 'stat_caption') as unknown as InputBoxContent | undefined,
  }))
    .filter((stat) => {
      const hasValue = stat.value !== undefined && stat.value.hasContent;
      const hasCaption = stat.caption !== undefined && stat.caption.hasContent;
      return hasValue || hasCaption;
    })
));

const valueDesign = useTextElementDesign<Design>('value');
const captionDesign = useTextElementDesign<Design>('caption');

const isValueVisible = computed<boolean>(() => valueDesign.visible ?? false);
const isCaptionVisible = computed<boolean>(() => captionDesign.visible ?? false);

const valueStyle = computed<CSSProperties>(() => ({
  fontSize: `${valueDesign.size}px`,
  fontFamily: valueDesign.font,
  color: (valueDesign.color as Color).hex,
  fontStyle: valueDesign.italic ? 'italic' : 'normal',
  fontWeight: valueDesign.bold ? 'bold' : 'normal',
}));

const captionStyle = computed<CSSProperties>(() => ({
  fontSize: `${captionDesign.size}px`,
  fontFamily: captionDesign.font,
  color: (captionDesign.color as Color).hex,
  fontStyle: captionDesign.italic ? 'italic' : 'normal',
  fontWeight: captionDesign.bold ? 'bold' : 'normal',
}));
</script>

<style scoped lang="scss">
.stats {
  --value-font-size: v-bind(valueStyle.fontSize);
  --value-font-family: v-bind(valueStyle.fontFamily);
  --value-color: v-bind(valueStyle.color);
  --value-font-style: v-bind(valueStyle.fontStyle);
  --value-font-weight: v-bind(valueStyle.fontWeight);
  --value-font-modifier: 1;

  --caption-font-size: v-bind(captionStyle.fontSize);
  --caption-font-family: v-bind(captionStyle.fontFamily);
  --caption-color: v-bind(captionStyle.color);
  --caption-font-style: v-bind(captionStyle.fontStyle);
  --caption-font-weight: v-bind(captionStyle.fontWeight);
  --caption-font-modifier: 1;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;

  &__element {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  &__button {
    align-self: start;
    margin-top: 20px;
    width: fit-content;
    max-width: 360px;

    @media screen and (max-width: 700px) {
      align-self: center;
    }
  }

  &__number {
    --value-font-modifier: 0.8;

    max-width: 100%;
    margin-bottom: 8px;
    overflow: hidden;
    word-wrap: break-word;
    font-size: var(--value-font-size);
    font-family: calc(var(--value-font-family) * var(--value-font-modifier));
    color: var(--value-color);
    font-style: var(--value-font-style);
    font-weight: var(--value-font-weight);

    @media screen and (min-width: 700px) {
      --value-font-modifier: 1;
    }
  }

  &__caption {
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    font-size: var(--caption-font-size);
    font-family: calc(var(--caption-font-family) * var(--caption-font-modifier));
    color: var(--caption-color);
    font-style: var(--caption-font-style);
    font-weight: var(--caption-font-weight);
  }
}
</style>
