<template>
  <div class="overflow-hidden">
    <div class="pb-container mt-4">
      <div class="grid gap-1.5 lg:gap-4"
           :style="innerWidth >= 1024 ? 'grid-template-columns: 33% auto;' : ''"
           v-if="paragraphComponent">
        <div class="bg-gray-100 rounded-xl p-8" :class="{'h-fit': section?.minimum_height}" v-if="paragraphComponent">
          <h3 class="text-[20px] text-gray-900 font-semibold">{{ paragraphComponent.title }}</h3>
          <p class="text-md font-normal mt-2 text-gray-600 leading-6" v-html="paragraphComponent.paragraph"></p>
        </div>
        <div class="overflow-hidden relative" v-if="imageComponent">
          <img :src="imageComponent.featured_image" :alt="imageComponent.caption" class="w-full rounded-xl md:rounded-3xl object-cover"/>
          <p v-html="imageComponent.caption" class="mt-2 text-[13px]"></p>
        </div>
      </div>
      <div v-else class="my-[44px]">
        <div
            v-if="headerComponent"
            class="w-full flex-col mb-6"
            :class="{'text-center items-center flex': headerComponent?.text_center}"
        >
          <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ headerComponent.title }}</h3>
          <p v-if="headerComponent?.supporting_text"
             class="text-[20px] font-normal mt-4 text-gray-600 leading-[30px] max-w-[800px]"
             v-html="headerComponent.supporting_text"></p>
        </div>
        <div :class="featureItemsComponent.hasOwnProperty('grid_columns') ? '' : 'flex flex-col-reverse md:flex-row gap-8'">
          <div class="grid gap-8"
               :class="featureItemsComponent.hasOwnProperty('grid_columns') ? `md:grid-cols-${featureItemsComponent.grid_columns}` : 'lg:grid-cols-2 lg:w-2/3'">
            <div v-for="item in items"
                 class="flex gap-3 w-full"
                 :class="{
              'bg-gray-50 p-8 rounded-xl md:rounded-3xl overflow-hidden flex-col' : featureItemsComponent.hasOwnProperty('grid_columns') && (featureItemsComponent.grid_columns > 2 || featureItemsComponent?.has_background),
              '!p-0 rounded-tr-[0px] rounded-bl-[0px]': item?.image
            }">
              <template v-if="item.title">
                <div v-if="item?.icon"
                     class="max-w-[48px] min-w-[48px] w-full max-h-[48px] min-h-[48px] h-full bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
                  <IconComponent :icon="item.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
                </div>
                <div class="ql-editor">
                  <h3 class="font-semibold text-[20px] text-gray-900">{{ item.title }}</h3>
                  <p class=" mt-2 text-md font-normal text-gray-600 leading-[24px]" v-html="item.supporting_text ?? item.description"></p>
                  <a
                      v-if="item?.primary_button?.show"
                      class="cursor-pointer text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4"
                      :download="item.primary_button.type === 'download' ? (item.primary_button.label || '') : null"
                      @click.prevent="onLinkClick(item.primary_button, $event)"
                  >
                    <span>{{ item.primary_button.label }}</span>
                    <ArrowUpRight v-if="item.primary_button.type !== 'download'" class="shrink-0 w-5 h-5"></ArrowUpRight>
                    <Download v-else class="shrink-0 w-5 h-5"></Download>
                  </a>
                </div>
              </template>
              <img v-else :src="item.image" alt="Feature Image" class="w-full h-full object-cover"/>
            </div>
          </div>
          <div v-if="imageComponent" class="w-full md:w-[560px] rounded-br-[24px] rounded-tl-[24px] overflow-hidden relative max-lg:pt-[55%]">
            <img :src="imageComponent.featured_image" :alt="imageComponent?.caption ?? 'Image'"
                 class="w-full h-full object-cover max-lg:absolute inset-0" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import IconComponent from "@/components/common/Icon.vue";
import {ref, computed} from "vue";
import {formatUrl, onLinkClick} from "@/components/helpers/common";
import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
import "quill/dist/quill.snow.css";
import Download from "@/assets/img/icons/download-01.svg";

const props = defineProps({
  section: {
    required: true,
    type: Object,
  },
});

const section = ref(props.section);
const innerWidth = ref(window.innerWidth);
const paragraphComponent = computed(() => {
  return section.value.components.find((component) => component.type === "paragraph");
});
const headerComponent = computed(() => {
  return section.value.components.find((component) => component.type === "header");
});
const imageComponent = computed(() => {
  return section.value.components.find((component) => component.type === "image_block");
});

const featureItemsComponent = computed(() => {
  let c = section.value.components.find((component) => component.type === "feature_items");
  if (!c) {
    return section.value.components.find((component) => component.type === "link_cards")
  }

  return c;
});

const items = computed(() => {
  return (featureItemsComponent.value.data || []).filter(function (o) {
    if (o.hasOwnProperty('public')) {
      return o.public;
    }

    return true;
  });
});

</script>
