import { useClipboard } from "use-clipboard-copy";
import useModalStore from "../stores/useModalStore";
import CloseIcon from "./icons/CloseIcon";
import LinkIcon from "./icons/LinkIcon";
import Button from "./ui/Button";
import Input from "./ui/Input";
import { ChangeEvent, FormEvent, useState } from "react";
import api from "../utils/api";
import { ToastContainer, toast } from "react-toastify";
import MailIcon from "./icons/MailIcon";
import QRCode from "react-qr-code";

function InviteModal() {
  const { setModal } = useModalStore();
  const clipboard = useClipboard();
  const [email, setEmail] = useState<string>("");
  const link = window.location.origin + window.location.pathname;

  async function sendInvite(e: FormEvent) {
    e.preventDefault();

    if (!email) return;

    const result = await api
      .post("sendInvite", { json: { email, link } })
      .json();
    console.log(result);

    toast.success("Приглашение отправлено", {
      position: "top-center",
      autoClose: 2000,
      hideProgressBar: true,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      theme: "dark",
      icon: <MailIcon />,
      closeButton: false,
    });

    setEmail("");
  }

  function handleChangeEmail(e: ChangeEvent<HTMLInputElement>) {
    setEmail(e.target.value.replace(/\s+/g, ""));
  }

  function handleClickClipboard() {
    clipboard.copy();

    toast.success("Ссылка скопирована в буфер обмена", {
      position: "top-center",
      autoClose: 2000,
      hideProgressBar: true,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      theme: "dark",
      icon: <LinkIcon />,
      closeButton: false,
    });
  }

  return (
    <div className="w-[400px] bg-white rounded-lg">
      <div className="flex justify-between items-center pl-6 pr-2 py-2 border-b border-[#DAE0E5]">
        <p className="text-sm font-semibold">Пригласить</p>
        <Button
          variant="tertiary"
          icon={<CloseIcon />}
          onlyIcon
          onClick={() => setModal(null)}
        />
      </div>

      <div className="px-6 py-4 border-b border-[#DAE0E5]">
        <div className="flex items-center justify-between">
          <p className="font-semibold text-center">
            Отсканируйте QR-код,
            <br />
            чтобы присоедениться
            <br />к демонстрации
          </p>
          <QRCode size={128} value={link} />
        </div>
      </div>

      <div className="px-6 py-4 border-b border-[#DAE0E5]">
        <form onSubmit={sendInvite} className="flex gap-2">
          <Input
            type="email"
            placeholder="Email"
            autoFocus
            value={email}
            onChange={handleChangeEmail}
          />
          <Button type="submit" large>
            <p className="text-xs">Пригласить</p>
          </Button>
        </form>
      </div>
      <div className="px-6 py-3">
        <input
          ref={clipboard.target}
          type="hidden"
          value={window.location.origin + window.location.pathname}
        />
        <button
          className="flex items-center gap-1 text-[#49A1F5] hover:text-[#4190DB] transition-colors"
          onClick={handleClickClipboard}
        >
          <LinkIcon />
          <span className="text-xs">Скопировать ссылку</span>
        </button>
      </div>

      <ToastContainer />
    </div>
  );
}

export default InviteModal;
