/* eslint-disable */
// @ts-ignore

import React, { cloneElement, memo, useCallback, useMemo } from "react";

import { Backdrop } from "./components/backdrop";
import { IconList } from "./components/icon/list";
import { Portal } from "./components/portal";
import { SocialIcons } from "./components/social-icons";
import { useDisclosure } from "./hooks/use-disclosure";
import type { RWebShareProps } from "./interfaces";
import { isWindows } from "@/helpers/is-windows";
import { track } from "@vercel/analytics";

const defaultSites = Object.keys(IconList).slice(0, 8);

const stripWindowsEmoji = (str = "") => {
  return isWindows ? str.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "") : str;
};

export const RWebShare = memo((props: RWebShareProps) => {
  const { onOpen, onClose, isOpen } = useDisclosure();

  const shareData = useMemo(
    () => ({
      ...props.data,
      title: stripWindowsEmoji(props.data.title || "share"),
      text: props.data.text || "",
      url:
        props.data.url ||
        (typeof window !== "undefined" && window.location.href) ||
        "",
    }),
    [props.data],
  );

  const handleOnClick = useCallback(() => {
    fetch(`/api/shortener/`, {
      method: "POST",
      body: JSON.stringify({
        url: window.location.href,
        title: props.data.songTitle,
      }),
    })
      .then((response) => response.json())
      .then((data) => {
        if (data.data.tiny_url) shareData.url = data.data.tiny_url;
        openShare();
      })
      .catch((e) => {
        //console.log("error generating short link - default to regular link");
        openShare();
      });
  }, [shareData]);

  const openShare = async () => {
    track("click_event:share", { link: shareData.url });
    if (window.navigator.share && !props.disableNative) {
      try {
        await window.navigator.share(shareData);
        props.onClick();
      } catch (e) {
        console.warn(e);
      }
    } else {
      onOpen();
    }
  };

  return (
    <>
      {/* Overrides Children element's `onClick` event */}
      {cloneElement(props.children, {
        ...props.children?.props,
        onClick: handleOnClick,
      })}

      {/* Share Component */}
      {isOpen && (
        <Portal>
          <Backdrop onClose={onClose}>
            <SocialIcons
              onClose={onClose}
              sites={props.sites || defaultSites}
              data={shareData}
              closeText={props.closeText}
              onClick={props.onClick}
            />
          </Backdrop>
        </Portal>
      )}
    </>
  );
});