import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { createRoom } from "../../requests/requests.room.js";
import styles from "../../styles/room/create.module.scss";
import { isBrowser, parseClassName } from "../../utils/utils.js";
import Layout from "../Layout.js";
import Input from "../Input.jsx";
import { useSessionContext } from "../../context/session.context.js";
import { isEmpty } from "rxjs";
export default function Create() {
  const [infos, setInfos] = useState({
    name: "",
    nick: "",
    private: true,
    results: false,
  });
  const { authData} = useSessionContext();
  useEffect(() => {
    if (isBrowser && localStorage.getItem('token') !== null) {
      if (authData) {
        setInfos({ ...infos, nick: authData.username });
      }
    }
  }, [isBrowser && localStorage.getItem('token') !== null]);
  const [pseudoMode, setPseudoMode] = useState(false);
  const [fade, setFade] = useState(false)
  useEffect(() => {
    setTimeout(() => {
      setPseudoMode(fade)
    }, 300)
  }, [fade])

  const router = useRouter();
  return (
    <Layout page="Créer une salle">
      <div className={styles.main}>
          {!pseudoMode && (
            <div className={parseClassName([fade ? styles['swipe']:undefined, styles['form']])}>
              <h1 className={styles.title}>Nouvelle salle</h1>
              <Input
                type="text"
                placeholder="Nom de la salle..."
                className="exo-input"
                value={infos.name}
                onChange={(e) => {
                  setInfos({ ...infos, name: e.target.value });
                }}
              />
              <div title="Défini si les participants doivent être autorisés pour entrer ou s'ils peuvent accéder à la salle librement">
                <input
                  checked={infos.private}
                  onChange={(e) => {
                    setInfos({ ...infos, private: !infos.private });
                  }}
                  type="checkbox"
                  name=""
                  id="private"
                />
                <label htmlFor="private">Privée</label>
              </div>
              <div title="Défini si les résultats sont accessible à tous les participants">
                <input
                  checked={infos.results}
                  onChange={(e) => {
                    setInfos({ ...infos, results: !infos.results });
                  }}
                  type="checkbox"
                  name=""
                  id="results"
                />
                <label htmlFor="results">Résultats publics</label>
              </div>
              <button
                className="exo-btn"
                onClick={() => {
                  if (isBrowser && localStorage.getItem('token') !== null) {
                    createRoom({ ...infos }).then((res) => {
                      sessionStorage.setItem("clientId", res.clientId);
                      router.push(
                        { pathname: `/room/${res.id_code}` },
                        undefined,
                        {
                          shallow: true,
                        }
                      );
                    });
                  } else {
                    if (infos.name != "") {
                      setFade(true);
                    }
                  }
                }}
              >
                {isBrowser && localStorage.getItem('token') !== null ? "Créer !" : "Suivant !"}
              </button>
            </div>
          )}

          {pseudoMode && (
            <div className={styles.form}>
              <h1 className={styles.title}>Entrez votre pseudo</h1>
              <Input
                type="text"
                placeholder="Pseudo"
                className="exo-input"
                value={infos.nick}
                disabled={isBrowser && localStorage.getItem('token') !== null}
                onChange={(e) => {
                  if (isEmpty(authData)) {
                    setInfos({ ...infos, nick: e.target.value });
                  }
                }}
              />
              <button
                className="exo-btn"
                onClick={() => {
                  createRoom({ ...infos }).then((res) => {
                    sessionStorage.setItem("clientId", res.clientId);
                    router.push(
                      { pathname: `/room/${res.id_code}` },
                      undefined,
                      {
                        shallow: true,
                      }
                    );
                  });
                }}
              >
                Créer !
              </button>
            </div>
          )}
      </div>
    </Layout>
  );
}