import QRIcon from "../icons/QRIcon";
import ShareFilledIcon from "../icons/ShareFilledIcon";
import PopupWrapper from "../PopupWrapper";
import Button from "../ui/Button";
import LinkShare from "../ui/LinkShare";
import usePopupStore from "../../store/popupStore";
import QRCodePopup from "./QRCodePopup";
import DraggableContainer from "../DraggableContainer";
import { useRef } from "react";

function SharePopup({ link }: { link: string }) {
  const { setPopup } = usePopupStore();
  const headerRef = useRef<HTMLDivElement>(null);

  function handleShare() {
    if (navigator.share) {
      navigator.share({
        title: "Пригласить",
        text: "Присоединяйся к моей встрече",
        url: link,
      });
    } else {
      navigator.clipboard.writeText(link);
    }
  }

  return (
    <DraggableContainer
      enabled={window.innerWidth >= 640}
      centerVertical
      constrainToBounds
      initialPosition={{ right: "5vw" }}
      dragHandleRef={headerRef}
    >
      <PopupWrapper
        title="Пригласить"
        headerRef={headerRef}
        leftButton={
          <Button
            variant="secondary"
            size="small"
            onClick={() => setPopup(<QRCodePopup link={link} />)}
          >
            <div className="2xl:size-[1.111vw] size-4">
              <QRIcon />
            </div>
          </Button>
        }
      >
        <div className="2xl:mb-[1.389vw] mb-3 2xl:space-y-[0.833vw] space-y-3">
          <p className="title-s font-medium">Скопировать ссылку</p>
          <LinkShare link={link} />
        </div>
        <Button
          variant="primary"
          size="large"
          className="w-full"
          onClick={handleShare}
        >
          Отправить
          <div className="2xl:size-[1.111vw] size-4">
            <ShareFilledIcon />
          </div>
        </Button>
      </PopupWrapper>
    </DraggableContainer>
  );
}

export default SharePopup;
