<template>
  <div class="paragraph">
    <transition name="fade" mode="out-in">
      <div :key="paragraph.image.png" class="image">
        <ImageWebpWrapper
          :image="paragraph.image"
          :width="407"
          :height="561"
          :lazy-load-enable="false" />
      </div>
    </transition>

    <div class="text-box">
      <transition name="slide-fade" mode="out-in">
        <div :key="paragraph.title">
          <h3 class="title" v-html="paragraph.title"></h3>
          <div class="description">
            {{ paragraph.description }}
          </div>
        </div>
      </transition>

      <VButton
        class="button"
        size="extra-big"
        icon-right="button-arrow"
        justify="space-between"
        @click="bookCall">
        <slot name="buttonText"></slot>
      </VButton>
    </div>
  </div>
<!--  <VPopup-->
<!--    v-if="popupIsOpened"-->
<!--    :is-opened="popupIsOpened"-->
<!--    :time-duration="3000"-->
<!--    @close="popupIsOpened = false">-->
<!--    <VPopupText />-->
<!--  </VPopup>-->
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { IAboutUsSwiper } from './AboutUsSwiper.types';
import VButton from '@/components/ui/common/VButton.vue';
import ImageWebpWrapper from '@/components/ui/ImageWebpWrapper.vue';
import { BOOK_CALL_LINK } from '@/utils/constants';
import isCountryBanned from '@/utils/isCountryBanned';
// import VPopup from '@/components/ui/common/VPopup.vue';
// import VPopupText from '@/components/ui/common/VPopupText.vue';

export default defineComponent({
  components: { ImageWebpWrapper, VButton },

  props: {
    paragraph: {
      type: Object as PropType<IAboutUsSwiper.Item>,
      required: true,
    },
  },

  data: () => ({
    popupIsOpened: false,
  }),

  methods: {
    bookCall() {
      return isCountryBanned()
        ? (this.popupIsOpened = true)
        : window.open(BOOK_CALL_LINK, '_target');
    },
  },
});
</script>

<style lang="scss" scoped>
.paragraph {
  display: flex;
  align-items: center;

  column-gap: 139px;

  .image {
    flex-shrink: 0;
    max-width: 407px;
    height: 500px;

    &:deep(img) {
      width: 100%;
      height: 100%;
      object-fit: cover;

      border-radius: 16px;
    }
  }

  .title {
    max-width: 491px;
    margin-bottom: 24px;

    color: #242628;
    font-weight: bold;
    font-size: 26px;
    line-height: 136%;
  }

  .description {
    max-width: 516px;
    min-height: 173px;
    margin-bottom: 48px;

    color: #3c3d3e;
    font-size: 16px;
    line-height: 180%;
  }

  .button {
    display: flex !important;
    width: 100%;
    max-width: 265px;
  }

  .slide-fade-enter-active {
    transition: all 1.2s ease;
  }

  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateX(80px);
    opacity: 0;
  }
}
</style>
