Untitled

import React, { useState, useEffect } from "react";
import axios from "axios";

import TextField from "@mui/material/TextField";

import { useNavigate } from "react-router-dom";
import Backdrop from "@mui/material/Backdrop";
import CircularProgress from "@mui/material/CircularProgress";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import Sidebar from "../Sidebar";
import UploadIcon from "../assets/icons/zertiassist_iconos_upload_24px.svg";
import DropFileZone from "../Points/components/DropFileZone";
import DropFileZoneHeaderIamge from "../Points/components/DropFileZoneHeaderImage";

import RichText from "./Richtext";
import RichTextTwo from "./RichtextTwo";
import RichTextThree from "./RichtextThree";
import RichTextFour from "./RichtextFour";
import MainBtn from "../UI-kit/Buttons/MainBtn";
import MainBtnCancel from "../UI-kit/Buttons/MainBtnCancel";
import Radio from "@mui/material/Radio";
import fetchApi from "../hooks/fetchApi";
import Autocomplete from "@mui/material/Autocomplete";
import StarBorderIcon from "@mui/icons-material/StarBorder";

const Builder = () => {
  const { t, i18n } = useTranslation();

  let navigate = useNavigate();

  const [loading, setLoading] = useState(false);
  const [levels, setLevels] = useState([]);
  const [levelID, setLevelID] = useState("");
  const [title, setTitle] = useState("");
  const [subtitle, setSubtitle] = useState("");
  const [documents, setDocuments] = useState("");
  const [header_images, setHeaderImages] = useState("");
  const [content, setContent] = useState("");

  const [inputList, setInputList] = useState([{ id: 0, question: "" }]);

  const [content_two, setContentTwo] = useState("");
  const [content_three, setContentThree] = useState("");
  const [content_four, setContentFour] = useState("");

  const [image, setImage] = useState("");
  const [color, setColor] = useState("");

  const [selectedValue, setSelectedValue] = React.useState("a");

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  const fetchLevels = async () => {
    setLoading(true);

    const { ok, data } = await fetchApi("/levels/index");

    if (ok) {
      setLevels(data);
      setLoading(false);
    } else {
      console.log("response was not ok");
      setLoading(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    setLoading(true);

    const body = {
      level_id: levelID,
      title,
      subtitle,
      image,
      color,
      content: "option 3",
      //content_two,
      //content_three,
      //content_four,
      documents,
      header_images,
    };

    const formData = new FormData();

    for (const property in body) {
      formData.append(property, body[property]);
    }

    try {
      const resp = await axios.post(
        process.env.REACT_APP_API_URL + "/builders/create",
        formData,
        {
          headers: {
            "api-key": process.env.REACT_APP_API_KEY,
          },
        }
      );

      console.log(resp.data);
      window.location.href = "/templates";
    } catch (err) {
      // Handle Error Here
      console.log(err);
    }
  };

  useEffect(() => {
    fetchLevels();
  }, []);
  console.log(header_images);
  return (
    <>
      <Sidebar />
      <form onSubmit={handleSubmit} className="frame">
        <br />

        <div className="d-flex justify-content-between align-items-center">
          <h2 className="title">
            {t("BuilderTable.5")}: Description + background image
          </h2>
          <div className="text-end">
            <Link style={{ textDecoration: "none" }} to="/templates">
              <MainBtnCancel>{t("Buttons.1")}</MainBtnCancel>
            </Link>
            <MainBtn disabled={subtitle === ""} type="submit">
              {t("Buttons.2")}
            </MainBtn>
          </div>
        </div>

        <hr />

        <div className="row">
          <div className="col-7">
            <div className="white-box">
              <p className="subtitle fw-bold">1. {t("NewTemplate.0")}</p>

              <p className="subtitle fw-bold">Level for this template</p>

              <Autocomplete
                isOptionEqualToValue={(option, value) =>
                  option.title === value.title
                }
                required
                disablePortal
                id="multiple-limit-tags"
                //value={userLevel}
                options={levels}
                getOptionLabel={(option) => option.title}
                onChange={(e, value) => {
                  var fieldValue = value;
                  if (!fieldValue) {
                    fieldValue = null;
                  } else setLevelID(value.id);
                }}
                renderInput={(params) => (
                  <TextField {...params} label="Choose level" />
                )}
              />

              <br />

              <p className="subtitle fw-bold">{t("NewTemplate.1")}</p>

              <TextField
                required
                onChange={(e) => setTitle(e.target.value)}
                type="text"
                label={t("NewTemplate.1")}
                style={{ width: "100%" }}
              />
            </div>

            <div className="white-box mt-2">
              <p className="subtitle fw-bold">2. {t("NewTemplate.2")}</p>
              <p className="subtitle fw-bold">{t("NewTemplate.3")}</p>

              <TextField
                required
                onChange={(e) => setSubtitle(e.target.value)}
                type="text"
                label={t("NewTemplate.3")}
                style={{ width: "100%" }}
              />

              <br />
              <br />

              <p className="subtitle fw-bold">Description</p>

              <TextField
                required
                onChange={(e) => setImage(e.target.value)}
                type="text"
                label={t("Description")}
                style={{ width: "100%" }}
              />

              {/*  
              <hr />

                <p className="subtitle fw-bold">{t("NewTemplate.4")} </p>

              <RichText content={content} setContent={setContent} /> 
              */}
            </div>

            <div className="white-box mt-2">
              <div className="p-2 w-50">
                <p className="subtitle fw-bold">
                  3. Logo & {t("NewTemplate.6")}
                </p>

                <p className="subtitle fw-bold">Logo</p>
                <div
                  className="wrapper"
                  style={{
                    height: "auto",
                  }}
                >
                  <DropFileZoneHeaderIamge setHeaderImages={setHeaderImages} />

                  <p className="standard-text mt-3">{t("AddPoints.2")} </p>
                </div>

                <p className="subtitle fw-bold mt-2"> {t("NewTemplate.6")}</p>

                <div
                  className="wrapper"
                  style={{
                    height: "auto",
                  }}
                >
                  <DropFileZone setDocuments={setDocuments} />

                  <p className="standard-text mt-3">{t("AddPoints.2")} </p>
                </div>
              </div>
            </div>
          </div>

          <div className="col-5 white-box" style={{ height: "fit-content" }}>
            <h4 className="subtitle fw-bold">{t("NewTemplate.11")}</h4>

            <div className="d-flex justify-content-center flex-column align-items-center text-center template-preview-box">
              <h4 className="subtitle fw-bold mt-4 mb-2">
                {t("NewTemplate.12")}
              </h4>

              <div className="template-preview-inner-box mt-2 w-75">
                <p className="mt-2">DESCRIPTION</p>
              </div>

              <div className="template-preview-inner-box mt-2 w-75">
                <p className="mt-2">LOGO</p>
              </div>

              <div className="template-preview-inner-box mt-2 w-75">
                <p className="mt-2">STUDENT NAME</p>
              </div>

              <div className="template-preview-inner-box mt-2 w-75">
                <p className="mt-2">LEVEL TITLE</p>
              </div>

              <div className="template-preview-inner-box mt-2 w-75">
                <p className="mt-2">LEVEL STAMP</p>
              </div>

              <div className="d-flex  justify-content-between w-50">
                <div className="template-preview-inner-box mt-3 mb-4 me-1 w-50">
                  <p className="mt-2">Ort,Datum</p>
                </div>
                <div className="template-preview-inner-box mt-3 mb-4 ms-1 w-50">
                  <p className="mt-2">{t("NewTemplate.9")}</p>
                </div>
              </div>
            </div>
            {/* SECOND PAGE */}
            <hr />
            <div className="d-flex justify-content-center flex-column align-items-center text-center template-preview-box">
              <div className="template-preview-inner-box mt-4 w-75">
                <p className="mt-2">{t("NewTemplate.14")}</p>
              </div>

              <div className="template-preview-inner-box mt-3 mb-4 w-50">
                <p className="mt-2">company footer</p>
              </div>
            </div>
          </div>
        </div>
      </form>

      <Backdrop
        sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={loading}
      >
        <CircularProgress color="inherit" />
      </Backdrop>
    </>
  );
};

export default Builder;