<template>
  <div class="overflow-hidden mt-4">
    <div class="pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row"
         :class="{
            '[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10': section?.revert,
            'justify-center': section?.center,
            'md:!px-0 !ml-0 justify-end': section?.align_left
    }">
      <div class="max-w-[800px] lg:py-4" :class="{'!max-w-full w-full': section?.is_full_width }" v-if="component?.title || component?.paragraph" ref="leftColumn">
        <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" v-if="component?.title">
          {{ component.title }}
        </h3>
        <div class="all-unset ql-editor">
          <div v-html="component.paragraph"></div>
          <div v-if="component?.hasOwnProperty('button') && button.show">
            <a :href="button.url"
               class="inline-flex items-center gap-2 !no-underline px-3 py-2.5 rounded-full shadow-xs text-md font-semibold !text-white bg-brand-600 hover:bg-brand-700 border border-brand-600 text-center cursor-pointer"
            >{{ button.title }} <ArrowUpRight class="w-5 h-5"></ArrowUpRight></a>
          </div>
        </div>
      </div>
      <div v-if="component?.featured_image" ref="rightColumn"
           class="w-full lg:min-w-[300px] lg:max-w-[536px] rounded-xl md:rounded-3xl overflow-hidden"
      >
        <div v-if="component?.source_type === 'video'" class="w-full h-full relative">
          <video
              @click="togglePlayPause"
              preload="metadata"
              ref="videoPlayer"
              class="h-full w-full object-cover"
          >
            <source :src="`${component?.featured_image}#t=2`" />
          </video>
          <PlayButton
              v-if="!isPlaying"
              class="cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity"
              @click="togglePlayPause">
          </PlayButton>
        </div>
        <img v-else :src="component?.featured_image" alt="Feature Image" class="w-full h-full object-cover rounded-xl md:rounded-3xl"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from "vue";
import PlayButton from "@/assets/svg/play.svg";
import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
import "quill/dist/quill.snow.css";

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

const leftColumn = ref(null);
const rightColumn = ref(null);

const section = ref(props.section);
const videoPlayer = ref(null);
const isPlaying = ref(false);

const component = computed(() => {
  return section.value.components[0];
})

const button = computed(() => {
  return component.value?.button || {};
})

onMounted(() => {
  if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
    rightColumn.value.style.height = `${leftColumn.value.offsetHeight}px`;
  }
});

const togglePlayPause = () => {
  if (!videoPlayer.value) {
    return;
  }

  if (videoPlayer.value?.paused) {
    videoPlayer.value.play();
    isPlaying.value = true;
  } else {
    videoPlayer.value.pause();
    isPlaying.value = false;
  }
};
</script>