<template>
  <div
    v-if="logoDesign.visible"
    class="logo-section"
  >
    <div
      v-if="logoContent.type === 'TEXT'"
      class="logo-section__text-frame"
      :style="logoFrameStyle"
    >
      <h1
        :style="logoTextStyle"
      >
        {{ logoTextContent }}
      </h1>
    </div>
    <div
      v-if="logoContent.type === 'IMAGE'"
      class="logo-section-image"
    >
      <img
        v-if="logoContent.image?.lowResolutionDesktopImage !== undefined"
        class="logo-section-image__content"
        :src="logoContent.image?.lowResolutionDesktopImage"
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { useLogoElementContent, useLogoElementDesign } from '@lightspeed/crane';
import { computed } from 'vue';

function getColor(color: Color | undefined) {
  if (typeof color === 'undefined') {
    return '';
  }
  return color.hex;
}

const logoContent = useLogoElementContent();
const logoDesign = useLogoElementDesign();

const logoTextContent = computed(() => {
  if (logoContent.text !== undefined) {
    if (logoDesign.value.capitalization === 'all') {
      return logoContent.text.toUpperCase();
    }
    if (logoDesign.value.capitalization === 'small') {
      return logoContent.text.toLowerCase();
    }
  }
  return logoContent.text;
});

const logoTextStyle = computed(() => ({
  fontSize: `${logoDesign.value.size}px`,
  fontFamily: logoDesign.value.font,
  color: getColor(logoDesign.value.color),
  'font-style': logoDesign.value.italic ? 'italic' : 'normal',
  'font-weight': logoDesign.value.bold ? 'bold' : 'normal',
  'letter-spacing': `${logoDesign.value.spacing ?? 0}px`,
}));

const logoFrameStyle = computed(() => ({
  'border-style': logoDesign.value.frame?.visible ? 'solid' : 'hidden',
  'border-width': `${logoDesign.value.frame?.width ?? 1}px`,
  'border-color': getColor(logoDesign.value.frame?.color),
}));
</script>

<style lang="scss" scoped>
.logo-section {
  height: 100%;
  width: 300px;
  text-align: center;
}

.logo-section__text-frame {
  text-align: center;
  border-radius: 3px;
}

.logo-section-image {
  height: 100%;
  width: 100%;
  display:block;

  &__content {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}
</style>
