import { useHistory } from "react-router-dom";
import "../../styles/styles.css";
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__container">
      <img alt="logoRC" className="logo__popup" src={logo}></img>
      <div className="popup">
        <div className="button__container">
          <p className="button__title">{t("popup-main-title")} </p>
          <button
            disabled={isLoading}
            onClick={handleConnect}
            className="button"
          >
            {t("popup-main-btn-start")}
          </button>
        </div>
        <div className="button__container">
          <span className="line"></span>
          <button onClick={() => history.goBack()} className="popup__caption">
            {t("popup-main-select")}
          </button>
        </div>
      </div>
    </div>
  );
};
