import { useState, useEffect } from 'react';
import { Button, Modal } from "@mui/material";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import SendOutlinedIcon from "@mui/icons-material/SendOutlined"; 

/**
 * @param {Object} props
 * @param {Boolean} props.open
 * @param {Function} props.onClose  
 * @param {String} props.title Título do compartilhamento
 * @param {String} props.link URL a ser compartilhada
 */
export default function ShareModal({ open, onClose, title, link }) {
  const [clicked, setClicked] = useState(false);
  
  useEffect(() => {
    setClicked(false);
  }, [open]);

  function shareLink() {
    if (navigator.share) {
      navigator.share({
        title: title,
        url: link,
      })
      .then(() => console.log("Compartilhamento realizado com sucesso"))
      .catch((error) => console.error("Erro ao compartilhar:", error));
    } else {
      console.log("Compartilhamento nativo não suportado");
    }
  }

  return (
    <Modal
      open={open}
      onClose={onClose}
      className="grid h-screen place-items-center m-5"
      slotProps={{
        backdrop: {
          sx: {
            backgroundColor: "rgba(0, 0, 0, 0.3)",
          },
        },
      }}
    >
      <div>
        <div className="flex flex-col bg-ice-HC-dark p-6 rounded-lg items-center outline outline-1 outline-ice-HC-white">
          <div className="text-xl font-bold text-darkGray-HC-white">{title}</div>
          <div className="p-3 mt-2 flex flex-col sm:flex-row">
            <div>
              <Button
                disableElevation
                variant="outlined"
                className="border border-lightGray-HC-white text-darkGray-HC-white-underline hover:bg-darkGray-HC-white hover:text-white-HC-dark-underline text-lg normal-case flex gap-2 "
                sx={{ justifyContent: "start" }}
                onClick={() => {
                  navigator.clipboard.writeText(link);
                  setClicked(true);
                }}
                alt="Copiar link para o clipboard"
              >
                <ContentCopyIcon className="p-[1px]" />
                {clicked ? <span>Copiado!</span> : <span>Copiar link!</span>}
              </Button>
            </div>
            {navigator.share ? (
              <div className="mt-2 sm:mt-0 sm:ml-2">
                <Button
                  disableElevation
                  variant="contained"
                  className="bg-ice-HC-dark text-darkGray-HC-white-underline text-lg normal-case flex gap-2"
                  onClick={shareLink}
                  alt="Compartilhar link"
                >
                  <SendOutlinedIcon className="p-[1px]" />
                  <span>Enviar</span>
                </Button>
              </div>
            ) : ""}
          </div>
          <div className="flex justify-center">
            <button
              className="text-sm text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
              onClick={() => { onClose(); setClicked(false); }}
            >
              Fechar
            </button>
          </div>
        </div>
      </div>
    </Modal>
  );
}