<template>
  <transition name="fade">
    <div v-if="isVisible" class="fixed-call-module">
      <transition :name="isOpen ? 'open' : 'close'">
        <opened-call-module
          v-if="isOpen"
          :business-unit-name="businessUnitName"
          :event-category="eventCategory"
          :event-label="eventLabel"
          :is-work-time="isWorkTime"
          @close="isOpen = false"
        />
        <closed-call-module
          v-else
          :event-category="eventCategory"
          :is-work-time="isWorkTime"
          @open="isOpen = true"
        />
      </transition>
    </div>
  </transition>
</template>

<script lang="ts">
import OpenedCallModule from './_components/OpenedCallModule/OpenedCallModule.vue'
import ClosedCallModule from './_components/ClosedCallModule.vue'
import {
  businessUnits,
  BusinessUnitType,
} from '@kalimotxo/domain/business-unit/business-unit'
import { PropType } from 'vue'

export default {
  components: { OpenedCallModule, ClosedCallModule },
  props: {
    businessUnitName: {
      type: String as PropType<BusinessUnitType>,
      default: 'default',
      validator: (v: BusinessUnitType) =>
        Object.keys(businessUnits).includes(v),
    },
    eventCategory: {
      type: String,
      required: true,
    },
    eventLabel: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      isOpen: false,
      isWorkTime: false,
      isVisible: true,
    }
  },
  async created() {
    const workTime = await this.$isWorkTime
    this.isWorkTime = workTime[this.businessUnitName as keyof typeof workTime]
  },
  mounted() {
    if (!window || !document) return
    window.addEventListener('scroll', this.onSetVisible, { passive: true })
  },

  destroyed() {
    if (window) {
      window.removeEventListener('scroll', this.onSetVisible)
    }
  },

  methods: {
    onSetVisible() {
      // 2rem offset for the floating call me to disappear on scroll bottom
      const scrollOffsetPx = 32
      this.isVisible =
        document.documentElement.scrollTop + scrollOffsetPx <=
        document.documentElement.scrollHeight -
          document.documentElement.clientHeight
    },
  },
}
</script>

<style lang="postcss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.open-enter-active,
.open-leave-active,
.close-enter-active,
.close-leave-active {
  transition:
    transform 0.4s,
    opacity 0.4s;
  transform-origin: bottom right;
}

.open-enter,
.open-leave-to,
.close-enter,
.close-leave-to {
  opacity: 0;
}

@media (--mobile) {
  .open-leave-to {
    transform: scaleY(2);
    transform-origin: bottom center;
  }
  .close-leave-to {
    transform: scaleY(0.5);
    transform-origin: bottom center;
  }
}

@media (--desktop) {
  .open-leave-to {
    transform: scaleX(1.4) scaleY(2);
    transform-origin: bottom right;
  }

  .close-leave-to {
    transform: scaleX(0.6) scaleY(0.5);
    transform-origin: bottom right;
  }
}
</style>
