import { useClipboard } from "use-clipboard-copy";
import ShareIcon from "../icons/ShareIcon";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import useModalStore from "../../stores/useModalStore";
import CloseIcon from "../icons/CloseIcon";
import AlertIcon from "../icons/AlertIcon";
import { Trans } from "react-i18next";

function ShareModal() {
  const [setModal] = useModalStore((state) => [state.setModal]);
  const clipboard = useClipboard();

  function toastInfo(text: string) {
    toast.info(text, {
      position: "top-center",
      autoClose: 2000,
      hideProgressBar: true,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      theme: "dark",
      icon: <AlertIcon />,
      closeButton: false,
    });
  }

  function handleClickCopy() {
    clipboard.copy();
    toastInfo("Ссылка скопирована в буфер обмена");
    setModal(null);
  }

  return (
    <>
      <div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[320px]">
        <div className="flex flex-col lg:gap-8 gap-4">
          <p className="font-gilroy lg:text-2xl">
            <Trans i18nKey={"shareModal.title"}>
              Пригласить
              <br />
              на демонстрацию
            </Trans>
          </p>
          <div className="flex flex-col gap-4">
            <p className="font-gilroy lg:text-xl">
              <Trans i18nKey={"shareModal.label"}>Ссылка для подключения</Trans>
            </p>
            <input
              ref={clipboard.target}
              readOnly
              type="text"
              className="bg-[#23242A] rounded px-4 py-3 outline-none"
              value={window.location.origin + window.location.pathname}
            />
            <button
              onClick={handleClickCopy}
              className="pl-3 pr-4 py-2 bg-gradient rounded flex items-center gap-1 w-fit"
            >
              <ShareIcon />
              <span className="text-sm">
                <Trans i18nKey={"shareModal.button"}>Скопировать</Trans>
              </span>
            </button>
          </div>
        </div>

        <button
          onClick={() => setModal(null)}
          className="absolute top-3 right-3 p-2 rounded-full transition-colors hover:bg-white hover:bg-opacity-5"
        >
          <CloseIcon />
        </button>
      </div>

      <ToastContainer />
    </>
  );
}

export default ShareModal;
