import "./sharePopup.css";
import close from 'images/icons/close.svg'

import { useState, useEffect } from "react";

import { useTranslation } from "react-i18next";

export const PopupShare: React.FC<any> = ({ setClose }) => {
  const [copy, setCopy] = useState(false);

  function copyLink() {
    navigator.clipboard.writeText(window.location.href);
    setCopy((prev) => !prev);
  }

  function closePopup() {
    setClose();
    setCopy(false);
  }

  useEffect(() => () => setCopy(false), []);

  const { t } = useTranslation();

  return (
    <div className="share-popup-container popup">
      
      <div className="popup-container-position">
        <div onClick={closePopup} className="icon-close-container">
          <img src={close}></img>
        </div>
        <div className="mobile-users-part-header share-header-popup">
          <h2 className="mobile-users-part-header-title">
            {t("popup-control-invite-title")}
          </h2>
        </div>
        <div className="share-popup-data-container">
          <h3 className="share-popup-data-title">
            {t("popup-control-link")}
          </h3>
          <input
            className="share-popup-data-input href"
            value={window.location.href}
            readOnly
          ></input>
        </div>
        <div className="share-popup-data-container">
          {!copy ? (
            <button onClick={copyLink} className="button button-primary ">
              <span className="share-popup-copy-button-icon"></span>
              <span className="">
                {copy ? t("popup-control-btn-active") : t("popup-control-btn")}
              </span>
            </button>
          ) : (
            <button onClick={copyLink} className="button button-teritary">
              <span className="share-popup-copied-button-icon"></span>
              <span className="">{t("popup-control-btn-active")}</span>
            </button>
          )}
        </div>
      </div>
    </div>
  );
};
