"use client";

import { Button as BaseButton } from "@nextui-org/react";
import { FaFacebook, FaLinkedin, FaWhatsapp } from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";

import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";

type PostSocialMediaProps = {
  onClick: (socialId: string) => void;
};

type CTAThanksForApplyingProps = {
  jobId: number;
};

function PostSocialMedia({ onClick }: PostSocialMediaProps) {
  const socialMediaIcons = ["twitter", "facebook", "linkedin", "whatsapp"];

  return (
    <div className="flex flex-row items-center justify-center">
      {socialMediaIcons.map((socialId) => (
        <BaseButton
          key={socialId}
          isIconOnly
          aria-label={`Share on ${
            socialId.charAt(0).toUpperCase() + socialId.slice(1)
          }`}
          variant="light"
          onPress={() => onClick(socialId)}
        >
          {(() => {
            const classes = "size-5";

            switch (socialId) {
              case "twitter":
                return <FaXTwitter className={classes} />;
              case "facebook":
                return <FaFacebook className={classes} />;
              case "linkedin":
                return <FaLinkedin className={classes} />;
              case "whatsapp":
                return <FaWhatsapp className={classes} />;
            }
          })()}
        </BaseButton>
      ))}
    </div>
  );
}

function CTAThanksForApplying({ jobId }: CTAThanksForApplyingProps) {
  const handleOnClickSocial = (socialId: string) => {
    const baseUrl = `${process.env.NEXT_PUBLIC_PFR_WEBSITE_BASE_URL}${INTERNAL_PAGES.participant.opportunities.main}/${jobId}`;
    const message =
      "Check out this amazing opportunity from People for Research! ";
    let shareUrl = "";

    switch (socialId) {
      case "facebook":
        shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${baseUrl}&quote=${encodeURIComponent(
          message
        )}`;
        break;
      case "twitter":
        shareUrl = `https://twitter.com/intent/tweet?url=${baseUrl}&text=${encodeURIComponent(
          message
        )}`;
        break;
      case "linkedin":
        shareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${baseUrl}&title=${encodeURIComponent(
          message
        )}`;
        break;
      case "whatsapp":
        shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(
          message
        )}%20${baseUrl}`;
        break;
      default:
        return;
    }

    window.open(shareUrl, "_blank");
  };

  return (
    <div className="bg-gray-200/70 dark:bg-[#383934] p-8 rounded-lg flex flex-col text-center justify-center items-center space-x-6 space-y-4 mt-8">
      <h3 className="text-2xl font-black font-inter text-center">
        Share this opportunity with the most important people in your life.
      </h3>
      <PostSocialMedia onClick={handleOnClickSocial} />
    </div>
  );
}

export default CTAThanksForApplying;