import "./PopupConnect.css";

import { useHistory } from "react-router-dom";
import { createSession } from "store/reducers/ActionCreator";
import { useAppDispatch } from "hooks/redux";


import { useTranslation } from "react-i18next";

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


  const handleConnect = () => {
    dispatch(createSession(title)).unwrap().then((res) => {
      history.push(`/stream/${res.payload.session_id}`);
    }).catch((res) => {
      alert(res);
      history.push("/");
    })
  };



  console.log(isLoading)

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