<template>
  <div>
    <div class="d-flex" style="height: 100%">
      <button
        v-if="isMobileDevice"
        type="button"
        class="align-self-center btn btn-link text-white ms-1 btn-lg px-1 hover-opacity"
        @click="handleShareButton"
      >
        <i class="bi bi-share-fill"></i>
      </button>
      <button
        v-else
        type="button"
        class="align-self-center btn btn-light ms-2 mb-0"
        @click="handleShareButton"
      >
        <i class="bi bi-share-fill"></i> Share
      </button>
    </div>

    <!-- Modal -->
    <div
      v-if="showModal"
      class="modal fade show"
      id="shareModal"
      tabindex="-1"
      aria-labelledby="shareModalLabel"
      style="display: block"
      aria-modal="true"
      role="dialog"
    >
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h1
              class="modal-title fs-5 text-black fw-bold"
              id="shareModalLabel"
            >
              Share to Friends
            </h1>
            <button
              type="button"
              class="btn-close"
              @click="showModal = false"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body d-grid gap-2">
            <input
              type="text"
              readonly
              class="form-control"
              :value="shareUrl"
            />
            <button class="btn btn-primary w-full" @click="copyLink">
              Copy Link
            </button>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showModal" class="modal-backdrop fade show"></div>
  </div>
</template>

<script>
import { toast } from "vue3-toastify";
export default {
  name: "ShareToFriends",
  data() {
    return {
      showModal: false,
      shareUrl: null,
    };
  },
  computed: {
    isMobileDevice() {
      if (
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent,
        )
      ) {
        return true;
      }
      return false;
    },
  },
  methods: {
    handleShareButton() {
      if (navigator.share) {
        // Extracting the HTML title
        const shareTitle = document.title;

        // Extracting the meta description
        const metaDescriptionTag = document.querySelector(
          'meta[name="description"]',
        );
        const shareText = metaDescriptionTag
          ? "Check this out: " + metaDescriptionTag.content
          : "";

        // Setting default values if not found
        const title = shareTitle || "FutureWalker";
        const text = shareText || "Check this AI & tech news platform out!";

        navigator
          .share({
            title: title,
            text: text,
            url: this.shareUrl,
          })
          .then(() => console.log("Successful share"))
          .catch((error) => {
            // this.showModal = true;
          });
      } else {
        this.showModal = true;
      }
    },

    copyLink() {
      navigator.clipboard
        .writeText(this.shareUrl)
        .then(() => {
          toast("Copied!", {
            position: "bottom-center",
            type: "success",
            timeout: 1500,
            closeOnClick: true,
            pauseOnFocusLoss: true,
            pauseOnHover: true,
            draggable: true,
            draggablePercent: 0.6,
            showCloseButtonOnHover: false,
            hideProgressBar: false,
            closeButton: true,
            icon: true,
            rtl: false,
          });
        })
        .catch((err) => {
          // Handle error
          console.error("Error copying text: ", err);
        });
    },
  },
  mounted() {
    this.shareUrl = window.location.href;
  },
};
</script>

<style scoped>
/* Add any component-specific styles here */
</style>
