import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { getExos, getTags } from "../../requests/requests.exos.js";
import {
  editParcours,
  getEditParcoursInfos,
  getParcoursInfos,
} 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/parcoursEdit.module.scss";
import Input from "../Input.jsx";
import { AlertType, useAlert } from "../../context/alert.context.js";
import { notificationService } from "../../services/notification.service.js";
import Back from "./back.jsx";

export default function ParcoursEdit({ parcours_id, room_code, user }) {
  const [parcours, setParcours] = useState();
  const router = useRouter();

  const [options, setOptions] = useState({
    name: "",
    timer: 0,
    success_condition: 0,
  });

  const [empty, setEmpty] = useState(false);
  const [exosList, setExos] = useState([]);

  const alert = useAlert();
  useEffect(() => {
    if (!user.owner) {
      router.push("/room/" + roomCode, undefined, {
        shallow: true,
      });
    }
  }, []);
  useEffect(() => {
    if (!parcours) {
      getEditParcoursInfos(parcours_id)
        .then((res) => {
          setExos([
            ...res.exercices.map((ex) => {
              return {
                id_code: ex.id_code,
                numberInExo: ex.number,
                name: ex.name,
              };
            }),
          ]);
          setOptions({
            name: res.name,
            timer: res.timer,
            success_condition: res.success_condition,
          });
        })
        .catch((err) => {
          router.push({ pathname: "/room/" + room_code });
        });
    }
  }, []);

  return (
    <Layout
      page={"Modification de parcours" + (options && options.name && ` - ${options.name}`)}
    >
      <Back link={"/room/" + room_code + "/" + parcours_id} />
      <div className={styles["main-form"]}>
        <div className={styles["selectExos"]}>
          <SelectExo
            exos={exosList}
            emptyError={empty}
            setExos={setExos}
            onlyNumber={true}
          />
        </div>
        <div className={styles["form"]}>
          <h1>Modification de parcours</h1>
          <Input
            type="text"
            placeholder="Name"
            value={options.name}
            onChange={(e) => {
              setOptions({ ...options, name: e.target.value });
            }}
          />
          <Input
            type="number"
            placeholder="Timer (minutes)"
            value={options.timer}
            onChange={(e) => {
              setOptions({ ...options, timer: parseInt(e.target.value) });
            }}
          />
          <Input
            type="number"
            placeholder="Condition de validation"
            value={options.success_condition}
            onChange={(e) => {
              setOptions({
                ...options,
                success_condition: parseInt(e.target.value),
              });
            }}
          />
          <div style={{ width: "100%" }}>
            <button
              className="exo-btn"
              onClick={() => {
                if (isBrowser) {
                  alert.alert({
                    title: "Attention",
                    active: true,
                    message: `Modifier un parcours supprime l'intégralité des essaies effectués !`,
                    type: AlertType.Warning,
                    validate: () => {
                      editParcours({
                        ...options,
                        exos: exosList.map((ee) => {
                          return {
                            id_code: ee.id_code,
                            number: ee.numberInExo,
                          };
                        }),
                        id_code: parcours_id,
                        code: user.code,
                      }).then((r) => {
                        notificationService.success(
                          "Parcours",
                          "Modifications effectuées avec succès !",
                          { keepAfterRouteChange: true }
                        );
                        router.push(
                          {
                            pathname: "/room/" + room_code + "/" + r.id_code,
                          },
                          undefined,
                          { shallow: true }
                        );
                      });
                    },
                  });
                }
              }}
            >
              Enregistrer
            </button>
            <button
              className="cancel-btn"
              onClick={() => {
                router.push(
                  {
                    pathname: "/room/" + room_code + "/" + parcours_id,
                  },
                  undefined,
                  { shallow: true }
                );
              }}
            >
              Annuler
            </button>
          </div>
        </div>
      </div>
    </Layout>
  );
}