<template>
  <div :class="titleClass">
    <h1 v-if="showTitle">
      {{ titleContent.value }}
    </h1>
    <p v-if="showDescription">
      {{ descriptionContent.value }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { computed, CSSProperties } from 'vue';
import {
  useLayoutElementDesign,
  useTextareaElementContent, useTextareaElementDesign,
} from '@lightspeed/crane';
import { Content, Design } from '../type.ts';

const titleContent = useTextareaElementContent<Content>('section_title');
const descriptionContent = useTextareaElementContent<Content>('section_description');

const titleDesign = useTextareaElementDesign<Design>('section_title');
const descriptionDesign = useTextareaElementDesign<Design>('section_description');

const showTitle = computed<boolean>(() => titleDesign.visible && titleContent.hasContent);
const showDescription = computed<boolean>(() => descriptionDesign.visible && descriptionContent.hasContent);

const layoutDesign = useLayoutElementDesign();
const titleClass = computed(() => [
  'title',
  {
    'title--narrow': layoutDesign.layout === 'Narrow_Title_And_Images_With_Border_Radius',
  },
]);

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

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

<style lang="scss" scoped>
.title {
  text-align: center;
  white-space: break-spaces;
  word-break: break-word;
  overflow-wrap: break-word;
  padding: 0 20px;

  &--narrow {
    max-width: 660px;
  }

  h1 {
    --font-size: v-bind(titleStyle.fontSize);
    --font-family: v-bind(titleStyle.fontFamily);
    --color: v-bind(titleStyle.color);
    --font-style: v-bind(titleStyle.fontStyle);
    --font-weight: v-bind(titleStyle.fontWeight);
    --font-size-multiplier: 1;

    font-size: calc(var(--font-size) * var(--font-size-multiplier));
    font-family: var(--font-family);
    color: var(--color);
    font-style: var(--font-style);
    font-weight: var(--font-weight);
    line-height: 1.3;
    margin-bottom: 24px;

    @media screen and (max-width: 768px) {
      --font-size-multiplier: 0.7;
    }
  }

  p {
    --font-size: v-bind(descriptionStyle.fontSize);
    --font-family: v-bind(descriptionStyle.fontFamily);
    --color: v-bind(descriptionStyle.color);
    --font-style: v-bind(descriptionStyle.fontStyle);
    --font-weight: v-bind(descriptionStyle.fontWeight);
    --font-size-multiplier: 1;

    font-size: calc(var(--font-size) * var(--font-size-multiplier));
    font-family: var(--font-family);
    color: var(--color);
    font-style: var(--font-style);
    font-weight: var(--font-weight);

    @media screen and (max-width: 768px) {
      --font-size-multiplier: 1.25;
    }
  }
}
</style>
