<script>
import feather from "feather-icons";
import {mapState} from "vuex";

import SocialButton from "@/components/SocialButton.vue";

export default {
  components: {SocialButton},

  data() {
    return {
      userScrollPosition: 0,
    };
  },

  computed: {
    ...mapState(["socialProfiles"]),

    isScrolled() {
      return this.userScrollPosition > 200;
    },
  },

  mounted() {
    window.addEventListener("scroll", this.updateScrollPosition);
    feather.replace();
  },

  updated() {
    feather.replace();
  },

  beforeDestroy() {
    window.removeEventListener("scroll", this.updateScrollPosition);
  },

  methods: {
    updateScrollPosition() {
      this.userScrollPosition = window.scrollY;
    },

    backToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
  },
};
</script>

<template>
  <transition name="fade">
    <div
      v-show="isScrolled"
      class="
        flex
        flex-col
        sm:space-y-2
        mr-4
        sm:mr-8
        xl:mr-16
        mb-6
        right-0
        bottom-0
        z-50
        fixed
        items-center
      ">
      <SocialButton class="mb-4" feather-icon="chevron-up" @click.native="backToTop()"/>
      <SocialButton v-for="social in socialProfiles"
                    :key="social.id"
                    :feather-icon="social.icon"
                    :url="social.url"
                    class="hidden lg:block"
      />
    </div>
  </transition>
</template>

<style lang="css" scoped>

</style>
