import "../../styles/styles.css";
import "./popupConnect.css";
import { useHistory } from "react-router-dom";
import { useTranslation } from "react-i18next";

export const PopupConnectEx: React.FC<any> = ({
  setVisible,
  onConnect,
  logo,
  setValue,
  value,
  isLoading,
}) => {
  const history = useHistory();
  const { t } = useTranslation();

  const handleConnect = () => {
    onConnect().then((res: any) => {
      console.log(res);
      if (!res.error) {
        history.push(`/stream/${res.payload.connection_code}`);
      } else {
        alert(res.error.message);
      }
    });
  };

  return (
    <div className="popup__container">
      <div className="popup__content">
        <img alt="logoRC" className="logo__popup_ex" src={logo}></img>
        <p className="popup__title">{t("popup-connect-title")}</p>
        <input
          value={value}
          onChange={(e) => setValue(e.target.value)}
          className="popup__input"
        ></input>
        <button
          onClick={handleConnect}
          disabled={!!!value || isLoading}
          type="submit"
          className={
            !!value || isLoading ? "button" : "button button__disabled"
          }
        >
          {t("popup-connect-btn-continue")}
        </button>
        <span className="line"></span>
        <button
          onClick={() =>
            setVisible({
              popup1: true,
              popup2: false,
            })
          }
          className="popup__caption"
        >
          {t("popup-connect-btn-mode")}
        </button>
      </div>
    </div>
  );
};