<template>
  <div
    class="image-section"
  >
    <component
      :is="component"
      class="image-section__link"
      :href="link || ''"
    >
      <div class="image-section__link-wrap">
        <div
          class="image-section__content-block"
          :class="imagePositionClass"
          :style="overlayStyle"
        >
          <img
            v-if="url !== undefined"
            class="image-section__content"
            :src="url"
          >
        </div>
        <div
          v-if="textDesign.visible"
          class="image-section__text"
          :class="textPositionClass"
        >
          <h1
            :style="textStyle"
          >
            {{ text }}
          </h1>
        </div>
      </div>
    </component>
  </div>
</template>

<script setup lang="ts">
import { computed, toRefs } from 'vue';
import { useImageElementDesign, useSelectboxElementDesign, useTextElementDesign } from '@lightspeed/crane';
import { Design } from '../../type.ts';
import { ColorType } from '../../entity/color.ts';

function getColor(color: string) {
  return `${color}20`;
}

const props = defineProps<{
  url: string | undefined,
  text: string | undefined,
  link: string | undefined,
}>();

const { url, text, link } = toRefs(props);
const textDesign = useTextElementDesign<Design>('image_text');
const imageDesign = useImageElementDesign<Design>('image_content');
const positionDesign = useSelectboxElementDesign<Design>('image_text_position');

const component = computed(() => {
  if (link.value !== undefined && link.value !== '') {
    return 'a';
  }
  return 'span';
});

const overlayConfig = computed(() => ({
  solidOverlay: getColor((imageDesign.overlay?.solid?.color as Color).raw),
  gradientOverlay: 'linear-gradient(180deg, '
      + `${getColor((imageDesign.overlay?.gradient?.fromColor as Color).raw)} 0%, `
      + `${getColor((imageDesign.overlay?.gradient?.toColor as Color).raw)} 100%)`,
}));

const overlayStyle = computed(() => {
  if (imageDesign.visible && imageDesign.overlay?.type === ColorType.GRADIENT) {
    return { background: overlayConfig.value.gradientOverlay };
  }
  if (imageDesign.visible && imageDesign.overlay?.type === ColorType.SOLID) {
    return { background: overlayConfig.value.solidOverlay };
  }
  return {};
});

const textStyle = computed(() => ({
  fontSize: `${textDesign.size}px`,
  fontFamily: textDesign.font,
  color: (textDesign.color as Color).hex,
  'font-style': textDesign.italic ? 'italic' : 'normal',
  'font-weight': textDesign.bold ? 'bold' : 'normal',
}));

const textPositionClass = computed(() => {
  if (textDesign.visible && positionDesign.value === 'under') {
    return 'image-section__text-position-under';
  }
  return 'image-section__text-position-on';
});
const imagePositionClass = computed(() => {
  if (textDesign.visible && positionDesign.value === 'under') {
    return 'image-section__content-block-position-under';
  }
  return 'image-section__content-block-position-on';
});
</script>

<style lang="scss" scoped>
.image-section {
  height: 100%;
  position: relative;

  &__link {
    height: 100%;
    width: 100%;
    display: flex;
  }

  &__link-wrap {
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
    z-index: 999;
  }

  &__content {
    display:block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
  }

  &__content-block {
    display: flex;
    width: 100%;

    &-position-on {
      height: 100%;
    }

    &-position-under {
      height: calc(100% - 60px);
    }
  }

  &__text {
    position: absolute;
    bottom: 0;
    width: 100%;
    align-content: center;
    padding: 16px;

    &-position-on {
      height: auto;
    }

    &-position-under {
      height: 60px;
    }
  }
}
</style>
