"use client";
import { ShareIcon } from "@/assets/svgs/Icons";
import ImageWithFallback from "@/components/UiComponents/ImageWithFallback";
import AppModal from "@/components/UiComponents/Modal/AppModal";
import { Product } from "@/interfaces/types";
import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation";
import { useState, useEffect, useState as useReactState } from "react";
import {
  FacebookShareButton,
  TwitterShareButton,
  WhatsappShareButton,
  LinkedinShareButton,
  FacebookIcon,
  TwitterIcon,
  WhatsappIcon,
  LinkedinIcon,
  TelegramShareButton,
  EmailShareButton,
  EmailIcon,
  TelegramIcon,
} from "react-share";

interface Props {
  product: Product;
}
const ShareItemModal = ({ product }: Props) => {
  const t = useTranslations();
  const pathname = usePathname();
  const [serverUrl, setServerUrl] = useReactState<string>("");

  useEffect(() => {
    const baseUrl = window.location.origin;
    setServerUrl(baseUrl);
  }, []);

  const shareUrl = `${serverUrl}${pathname}`; 
  const shareTitle = ` ${product?.name}`;
  const [openShare, setOpenShare] = useState(false);

  const handleClose = () => setOpenShare(false);

  return (
    <>
      <button
        className="product_fav_btn !rounded-full"
        onClick={() => setOpenShare(true)}
      >
        <ShareIcon />
      </button>
      <AppModal
        centered
        isModalVisible={openShare}
        onCancel={handleClose}
        getContainer={"html"}
      >
        <div className="flex flex-col items-center space-y-4 mt-12">
          <h2 className="text-2xl font-bold">{t("Text.shareItem")}</h2>
          <ImageWithFallback
            width={1000}
            height={1000}
            src={product?.main?.media}
            alt={product?.title}
            className="w-40 h-40 object-cover rounded-md"
          />
          <div className="share-buttons flex gap-4 mt-4">
            <FacebookShareButton url={shareUrl} hashtag="#Outlet">
              <FacebookIcon size={40} round />
            </FacebookShareButton>
            <TwitterShareButton url={shareUrl} title={shareTitle}>
              <TwitterIcon size={40} round />
            </TwitterShareButton>
            <WhatsappShareButton url={shareUrl} title={shareTitle}>
              <WhatsappIcon size={40} round />
            </WhatsappShareButton>
            <LinkedinShareButton url={shareUrl} title={shareTitle}>
              <LinkedinIcon size={40} round />
            </LinkedinShareButton>{" "}
            <EmailShareButton
              url={shareUrl}
              subject={shareTitle}
              body="Check out this product!"
            >
              <EmailIcon size={40} round />
            </EmailShareButton>
            <TelegramShareButton url={shareUrl} title={shareTitle}>
              <TelegramIcon size={40} round />
            </TelegramShareButton>
          </div>
        </div>
      </AppModal>
    </>
  );
};

export default ShareItemModal;