<template>
  <SectionWrapper
    class="tag-lines-section"
    :style="backgroundStyle"
  >
    <div class="tag-lines-section__wrapper">
      <div class="tag-lines-section__info">
        <Tagline
          v-if="isTaglineVisible"
          class="tag-lines-section__tagline"
          :design="taglineDesign"
        >
          {{ taglineContent.value }}
        </Tagline>

        <Title
          v-if="isTitleVisible"
          class="tag-lines-section__title"
        />

        <div class="tag-lines-section__highlighted-texts">
          <template
            v-for="(element, index) in highlightedTextElements"
          >
            <HighlightedText
              v-if="element.design.visible"
              :key="`${element.text?.value}__${index}`"
              :class="[
                'tag-lines-section__highlighted-text',
                `tag-lines-section__highlighted-text--${index + 1}`,
              ]"
              :design="element.design"
            >
              {{ element.text?.value }}
            </HighlightedText>
          </template>
        </div>
      </div>

      <SectionImage
        class="tag-lines-section__image"
        :highlights="highlightedTextElements"
        :section-image="sectionImageContent"
      />
    </div>
  </SectionWrapper>
</template>

<script setup lang="ts">
import {
  useBackgroundElementDesign,
  useImageElementContent,
  useTextElementDesign,
  useInputboxElementContent,
} from '@lightspeed/crane';
import { computed } from 'vue';
import { Content, Design } from './type.ts';
import Tagline from '../../shared/components/Tagline.vue';
import Title from './component/Title.vue';
import SectionImage from './component/SectionImage.vue';
import HighlightedText from './component/HighlightedText.vue';
import { useHighlightedTextElementList } from './composables/highlighted-text-image-list.ts';
import SectionWrapper from '../../shared/components/SectionWrapper.vue';

const backgroundDesign = useBackgroundElementDesign<Design>('background');
const background = computed(() => ({
  type: backgroundDesign.background?.type,
  solidColor: backgroundDesign.background?.solid?.color as Color,
  fromColor: backgroundDesign.background?.gradient?.fromColor as Color,
  toColor: backgroundDesign.background?.gradient?.toColor as Color,
}));

const backgroundStyle = computed(() => {
  if (background.value.type === 'gradient') {
    return { 'background-image': `linear-gradient(to right, ${background.value.fromColor.hex}, ${background.value.toColor.hex})` };
  }

  return { 'background-color': background.value.solidColor.hex };
});

const taglineContent = useInputboxElementContent<Content>('section_tagline');
const taglineDesign = useTextElementDesign<Design>('section_tagline') as TextDesignData;
const isTaglineVisible = computed<boolean>(() => !!taglineDesign.visible && taglineContent.hasContent);

const titleContent = useInputboxElementContent<Content>('section_title');
const titleDesign = useTextElementDesign<Design>('section_title');
const isTitleVisible = computed<boolean>(() => !!titleDesign.visible && titleContent.hasContent);

const sectionImageContent = useImageElementContent<Content>('section_image');

const {
  highlightedTextElements,
} = useHighlightedTextElementList();

</script>

<style lang="scss" scoped>
.tag-lines-section {
  &__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    @media screen and (min-width: 900px) {
      flex-direction: row;
      justify-content: space-between;
    }
  }

  &__info {
    width: 100%;

    @media screen and (min-width: 900px) {
      width: unset;
      max-width: 530px;
    }
  }

  &__tagline {
    margin-bottom: 24px;
  }

  &__image {
    width: 100%;

    @media screen and (min-width: 900px) {
      max-width: 479px;
    }
  }

  &::v-deep(.tag-lines-section__highlighted-texts:has(.tag-lines-section__highlighted-text:hover)) {
    & .tag-lines-section__highlighted-text {
      opacity: 0.2;

      &:hover {
        opacity: 1;
      }
    }
  }

  &__highlighted-text {
    transition: opacity ease-in-out 0.3s;
  }

  &:has(.tag-lines-section__highlighted-text:hover) {
    &::v-deep(.section-image__element) {
      opacity: 0;
    }
  }

  &:has(.tag-lines-section__highlighted-text--1:hover)::v-deep(.section-image__element--1),
  &:has(.tag-lines-section__highlighted-text--2:hover)::v-deep(.section-image__element--2),
  &:has(.tag-lines-section__highlighted-text--3:hover)::v-deep(.section-image__element--3) {
    opacity: 1;
  }
}
</style>
