import "./PopupConnect.css";

import { useHistory } from "react-router-dom";

import { useTranslation } from "react-i18next";

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

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

  return (
    <div className="popup">
      <div className="popup-img-container">
        <img className="popup-logo" src={logo} alt="лого" />
      </div>
      <div className="popup-button-container">
        <button onClick={handleConnect} className="button button-primary">
          {t("popup-main-btn-start")}
        </button>
        <div className="line"></div>
        <button onClick={() => history.goBack()} className="button button-type-small">
          {t("popup-main-select")}
        </button>
      </div>
    </div>
  );
};
