<template>
  <section class="intro-slider-section" :style="backgroundStyle">
    <Tagline
      v-if="taglineDesign.visible"
      :design="taglineDesign"
    >
      {{ taglineContent.value }}
    </Tagline>

    <Title />

    <Button
      v-if="buttonDesign.visible"
      class="intro-slider-section__button"
      :design="buttonDesign"
      :content="buttonContent"
    />
    <Slider />
  </section>
</template>

<script setup lang="ts">
import {
  useBackgroundElementDesign,
  useInputboxElementContent,
  useTextElementDesign,
  useButtonElementContent,
  useButtonElementDesign,
  ButtonContent,
} from '@lightspeed/crane';
import { computed } from 'vue';
import { Content, Design } from './type.ts';
import Slider from './component/Slider.vue';
import Title from './component/Title.vue';
import Tagline from '../../shared/components/Tagline.vue';
import Button from '../../shared/components/Button.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 buttonContent = useButtonElementContent<Content>('section_button') as ButtonContent;
const buttonDesign = useButtonElementDesign<Design>('section_button') as ButtonDesignData;
</script>

<style scoped lang="scss">
.intro-slider-section {
  min-height: 810px;
  width: 100%;
  padding: 110px 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;

  &__button {
    margin: auto;
    width: fit-content;
    max-width: 360px;
  }
}
</style>
