import { Trans } from "react-i18next";
import QRCode from "react-qr-code";
import CloseIcon from "../../icons/CloseIcon";
import LinkIcon from "../../icons/LinkIcon";
import Button from "../../ui/Button";
import useModalStore from "../../../stores/useModalStore";
import { useClipboard } from "use-clipboard-copy";
import { toast, Bounce, ToastContainer } from "react-toastify";
import InfoIcon from "../../icons/InfoBlueIcon";

function InviteModal() {
  const { setModal } = useModalStore();
  const clipboard = useClipboard();
  const link = window.location.origin + window.location.pathname;

  function handleClickClipboard() {
    clipboard.copy();

    toast.info("Ссылка скопирована в буфер обмена", {
      icon: <InfoIcon className="text-blue-500" />,
      position: "top-center",
      autoClose: 3000,
      hideProgressBar: true,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
      theme: "light",
      transition: Bounce,
    });
  }

  return (
    <div className="relative top-0 lg:left-0 left-12 lg:w-full w-[calc(100vw-48px)] h-full lg:bg-black lg:bg-opacity-50 bg-white sm:border-none border-l border-[#DAE0E5] flex flex-col lg:items-center lg:justify-center">
      <div className="bg-white flex flex-col lg:rounded-lg lg:w-[400px] lg:flex-none flex-1">
        <div className="p-2 pl-6 flex items-center justify-between border-b border-[#DAE0E5]">
          <p className="text-sm font-semibold">
            <Trans i18nKey={"invite"}>Пригласить</Trans>
          </p>
          <Button
            variant="tertiary"
            icon={<CloseIcon />}
            onlyIcon
            onClick={() => setModal(null)}
          />
        </div>
        <div className="py-4 px-6 flex-1 flex flex-col gap-8">
          <div className="flex items-center lg:justify-between justify-center gap-8">
            <QRCode
              size={128}
              value={link}
              className="rounded-lg p-3 shadow-lg"
            />
            <p className="font-semibold text-right">
              <Trans i18nKey={"scanQRCode"}>
                Отсканируйте QR-код,
                <br />
                чтобы присоедениться
                <br />к демонстрации
              </Trans>
            </p>
          </div>
          <div className="">
            <Button
              icon={<LinkIcon />}
              fullWidth
              large
              onClick={handleClickClipboard}
            >
              <Trans i18nKey={"copyLinkToConnect"}>
                Скопировать ссылку для подключения
              </Trans>
            </Button>
            <input ref={clipboard.target} type="hidden" value={link} />
          </div>
          {/* <div>
            <form onSubmit={(e) => e.preventDefault()} className="flex gap-2">
              <input
                type="email"
                placeholder="Email"
                className="text-sm bg-transparent border border-[#DAE0E5] rounded-lg px-2 pb-0.5 outline-none h-10 w-full"
              />
              <Button type="submit" large className="" disabled>
                <Trans i18nKey={"invite"}>Пригласить</Trans>
              </Button>
            </form>
          </div> */}
        </div>
      </div>

      <ToastContainer />
    </div>
  );
}

export default InviteModal;
