<template>
  <div class="image-section">
    <div
      :class="overlayClass"
      class="image-section__overlay"
      :style="overlayStyle"
    >
      <img
        class="image-section__content"
        :src="imageContent.highResolutionMobileImage"
        loading="lazy"
        alt=""
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  useImageElementContent,
  useImageElementDesign,
  useLayoutElementDesign,
} from '@lightspeed/crane';
import { computed, CSSProperties } from 'vue';

import type { Content, Design } from '../type.ts';

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

const imageContent = useImageElementContent<Content>('image');
const imageDesign = useImageElementDesign<Design>('image');
const layoutDesign = useLayoutElementDesign();

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 overlayClass = computed(() => ([
  'image-section__overlay',
  {
    'image-section__overlay--border-radius': layoutDesign.layout === 'Images_With_Border_Radius',
  },
]));

const overlayStyle = computed(() => {
  const style: CSSProperties = {};

  if (imageDesign.visible && imageDesign.overlay?.type === 'gradient') {
    style.background = overlayConfig.value.gradientOverlay;
  }
  if (imageDesign.visible && imageDesign.overlay?.type === 'solid') {
    style.background = overlayConfig.value.solidOverlay;
  }

  return style;
});
</script>

<style lang="scss" scoped>
.image-section {
  height: 100%;
  position: relative;
  width: 100%;
  display: flex;
  z-index: 999;

  &__overlay {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;

    &--border-radius {
      border-radius: 24px;

      @media screen and (min-width: 900px) {
        border-radius: 32px;
      }
    }
  }

  &__content {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
  }
}
</style>
