const socialBox = document.querySelector(".social-box");

const smallButton = `
  <div class="icon" title="Udostępnij w serwisie Facebook" data-share="facebook">
    <svg class="svg-icon">
      <use xlink:href="#facebook-icon"></use>
    </svg>
  </div>
  <div class="icon" title="Udostępnij w serwisie Twitter" data-share="twitter">
    <svg class="svg-icon">
      <use xlink:href="#twitter-icon"></use>
    </svg>
  </div>
`;

const shareButton = `
  <div class="icon share-icon">
    <svg class="svg-icon">
      <use xlink:href="#share-icon"></use>
    </svg>
  </div>
`;

// const shareData = {
//   title: document.querySelector("title").textContent,
//   text: document.querySelector('meta[name="description"]').getAttribute("content"),
//   url: document.querySelector('link[rel="canonical"]').getAttribute("href")
// };

const shareData = {
  title: 'navigator.shar method',
  text: 'opis interesującej strony',
  url: 'https://address.pl'
};


socialBox.innerHTML = navigator.share ? shareButton : smallButton;

if (navigator.share) {
  socialBox.addEventListener("click", async () => {
    try {
      await navigator.share(shareData);
    } catch (err) {
      console.log(err);
    }
  });
}

function showShareLink(typeSocial, url, title) {
  let urlLink;
  switch (typeSocial) {
    case "facebook":
      urlLink = `https://www.facebook.com/sharer/sharer.php?u=${encodeURI(
        url
      )}&p=${encodeURI(title)}`;
      break;
    case "twitter":
      urlLink = `http://twitter.com/share?text=${title}&url=${url}`;
      break;
    default:
      break;
  }
  return urlLink;
}

const socialIcons = document.querySelectorAll("div[data-share]");

const winWidth = 520;
const winHeight = 320;
const winTop = window.screen.height / 2 - winHeight / 2;
const winLeft = window.screen.width / 2 - winWidth / 2;

socialIcons.forEach((icon) => {
  icon.addEventListener("click", (event) => {
    window.open(
      showShareLink(event.target.dataset.share, shareData.url, shareData.title),
      "sharer",
      `top=${winTop}, left=${winLeft}, toolbar=0, status=0, width=${winWidth}, height=${winHeight}`
    );
  });
});