<template>
  <SectionWrapper :style="backgroundStyle">
    <Title v-if="showTitle" />
    <div
      v-if="categorySelectorContent.hasContent"
      class="categories-wrapper"
    >
      <CategoryItem v-for="category in categorySelectorContent.categories" :key="category.id" :category="category" />
    </div>
  </SectionWrapper>
</template>

<script setup lang="ts">
import { computed, CSSProperties } from "vue";
import {
  Color,
  useBackgroundElementDesign,
  useCategorySelectorElementContent,
  useInputboxElementContent,
  useTextElementDesign
} from "@lightspeed/crane-api";

import { Content, Design } from "./type";
import SectionWrapper from "../../shared/components/SectionWrapper.vue";
import Title from "./component/Title.vue";
import CategoryItem from "./component/CategoryItem.vue";


const titleContent = useInputboxElementContent<Content>("section_title");
const titleDesign = useTextElementDesign<Design>('section_title');


const categorySelectorContent = useCategorySelectorElementContent<Content>(
  "trending_categories",
);

const showTitle = computed(() => titleDesign.visible && titleContent.hasContent);

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<CSSProperties>(() => {
  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 };
});
</script>

<style lang="scss" scoped>
.categories-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  gap: 12px;

  @media (min-width: 768px) {
    max-width: 1440px;
  }
}
</style>
