// Icons
import CopyBlueD from "@/components/icons/CopyBlueD";
import DownloadBlue from "@/components/icons/DownloadBlue";
import WhatsappBlueD from "@/components/icons/WhatsappBlueD";
import TelegramBlueD from "@/components/icons/TelegramBlueD";
import LinkedingBlueD from "@/components/icons/LinkedingBlueD";

// Packages
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import { Button } from "@mui/material";

function List({ hiddenRef }) {
  const handleDownloadPDF = async () => {
    const element = hiddenRef.current;
    if (!element) return;

    const canvas = await html2canvas(element, {
      backgroundColor: "#ffffff",
      useCORS: true,
      scale: 2,
    });

    const imgData = canvas.toDataURL("image/png");

    const imgWidth = 210;
    const imgProps = canvas;
    const pxPerMm = imgProps.width / imgWidth;
    const imgHeight = canvas.height / pxPerMm;

    const pdf = new jsPDF({
      orientation: "portrait",
      unit: "mm",
      format: [imgWidth, imgHeight],
    });

    pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
    pdf.save("poster.pdf");
  };

  const listIcons = [
    { name: "واتساپ", icon: <WhatsappBlueD /> },
    { name: "تلگرام", icon: <TelegramBlueD /> },
    { name: "لینکدین", icon: <LinkedingBlueD /> },
    { name: "کپی لینک", icon: <CopyBlueD /> },
    { name: "دانلود", icon: <DownloadBlue /> },
  ];

  return (
    <>
      <ul className="flex items-center mx-[60px] sm:mx-[86px] md:mx-[112px] lg:mx-[140px] justify-center mt-[8px] md:mt-[12px] lg:mt-[16px] gap-[24px] sm:gap-[26px] md:gap-[29px] lg:gap-[32px]">
        {listIcons.map((item, idx) => (
          <li
            key={idx}
            className="flex flex-col justify-center items-center w-fit gap-[2px]"
          >
            <Button
              className="
                    !p-[0px] !bg-[#EAECFA] !rounded-full !min-w-0 grid place-items-center
                    !w-[24px] sm:!w-[28px] md:!w-[32px] lg:!w-[36px]
                    !h-[24px] sm:!h-[28px] md:!h-[32px] lg:!h-[36px]
                  "
              onClick={handleDownloadPDF}
              variant="text"
            >
              <div
                className="grid place-items-center w-full-icon
                                        !w-[16px] md:!w-[17px] lg:!w-[18px]
                                        !h-[16px] md:!h-[17px] lg:!h-[18px]"
              >
                {item.icon}
              </div>
            </Button>
          </li>
        ))}
      </ul>
    </>
  );
}

export default List;