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

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

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

  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>
          <span className="line"></span>
        </div>
        <div className="button__container">
          <p className="button__title">{t("popup-main-caption")} </p>
          <button
            className="button button__disabled"
            onClick={() =>
              setVisible({
                popup1: false,
                popup2: true,
              })
            }
          >
            {t("popup-main-btn-connect")}
          </button>
          <span className="line"></span>
          <button onClick={() => history.goBack()} className="popup__caption">
            {t("popup-main-select")}
          </button>
        </div>
      </div>
    </div>
  );
};
