import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { getExos, getTags } from "../../requests/requests.exos.js";
import { createParcours } from "../../requests/requests.room.js";
import { isBrowser } from "../../utils/utils.js";
import Layout from "../Layout.js";
import SelectExo from "../pdf_gen/selectExo.jsx";
import styles from "../../styles/room/createParcours.module.scss";
import Input from "../Input.jsx";
import { IoMdArrowRoundBack } from "react-icons/io";
import Link from "next/link";
import Back from "./back.jsx";

export default function CreateParcours({ roomCode, user }) {
  const [empty, setEmpty] = useState(false);
  const [exosList, setExos] = useState([]);
  const router = useRouter();
  const [tags, setTags] = useState();
  const[errors, setErrors] = useState({})
  useEffect(() => {
    if (!user.owner) {
      router.push("/room/" + roomCode, undefined, {
        shallow: true,
      });
    }
  }, []);
  const [options, setOptions] = useState({
    name: "",
    timer: 10,
    success_condition: 10,
  });

  return (
    <Layout page = {'Nouveau parcours'}>
      <>
        {exosList  && (
          <div className={styles['full-container']}>
            <Back link={"/room/" + roomCode} />
            <div className={styles.form}>
              <div className={styles.selectExos}>
                <SelectExo
                  exos={exosList}
                  emptyError={empty}
                  setExos={setExos}
                  onlyNumber={true}
                />
              </div>
              <div className={styles["options"]}>
                <h1>Nouveau parcours</h1>
                <Input
                  error={errors.name}
                  type="text"
                  placeholder="Nom du parcours"
                  value={options.name}
                  onChange={(e) => {
                    setOptions({ ...options, name: e.target.value });
                  }}
                />
                {errors.name &&
                  errors.name.map((e) => {
                    return <p className={styles["errors"]}>{e}</p>;
                  })}
                <Input
                  error={errors.timer}
                  type="number"
                  placeholder="Timer (minutes)"
                  value={options.timer}
                  onChange={(e) => {
                    setOptions({ ...options, timer: parseInt(e.target.value) });
                  }}
                />
                {errors.timer &&
                  errors.timer.map((e) => {
                    return <p className={styles["errors"]}>{e}</p>;
                  })}

                <Input
                  error={errors.success_condition}
                  type="number"
                  placeholder="Condition de validation (sur 20)"
                  value={options.success_condition}
                  onChange={(e) => {
                    setOptions({
                      ...options,
                      success_condition: parseInt(e.target.value),
                    });
                  }}
                />
                {errors.success_condition &&
                  errors.success_condition.map((e) => {
                    return <p className={styles["errors"]}>{e}</p>;
                  })}

                <div style={{ width: "100%" }}>
                  <button
                    className="exo-btn"
                    onClick={() => {
                      if (isBrowser) {
                        createParcours({
                          ...options,
                          exos: exosList.map((ee) => {
                            return {
                              id_code: ee.id_code,
                              number: ee.numberInExo,
                            };
                          }),
                          room_code: roomCode,
                          code: user.code,
                        })
                          .then((r) => {
                            router.push(
                              {
                                pathname: "/room/" + roomCode + "/" + r.id_code,
                                query: { action: "view" },
                              },
                              undefined,
                              { shallow: true }
                            );
                          })
                          .catch((err) => {
                            setErrors(err.response.data);
                            if (err.response.data.exercices) {
                              setEmpty(true);
                            }
                          });
                      }
                    }}
                  >
                    Valider
                  </button>
                  <button
                    className="cancel-btn"
                    onClick={() => {
                      router.push("/room/" + roomCode, undefined, {
                        shallow: true,
                      });
                    }}
                  >
                    Annuler
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </>
    </Layout>
  );
}