EditResourceModal.js

import { Button, Modal } from "@mui/material";
import { useEffect, useState } from "react";
import FieldLabel from "./FieldLabel";
import CustomTextField from "../publicar/components/CustomTextField";
import { getStoredValue } from "../handlers/localStorageHandler";
import mecredApi from "@/axiosConfig";

export function EditResourceModal({ open, onClose, resource, setEditOpen }) {
    const [title, setTitle] = useState("");
    const [description, setDescription] = useState("");
    const [openSuccess, setOpenSuccess] = useState(false)

    const token = getStoredValue("access_token");
    const client = getStoredValue("client");
    const uid = getStoredValue("uid");

    useEffect(() => {
        if (resource?.learning_object) {
            setTitle(resource.learning_object.name ?? "");
            setDescription(resource.learning_object.description ?? "");
        }
    }, [resource]);

    if (!resource?.learning_object) return null;

    const handleTitleChange = (e) => setTitle(e.target.value);
    const handleDescriptionChange = (e) => setDescription(e.target.value);

    const fetchData = async () => {
        const payload = {
            "id": resource?.learning_object.id,
            "name": title,
            "description": description
        }
        console.log("aa")

        try {
            await mecredApi.put(`/learning_objects/${resource?.learning_object.id}.json`, payload, {
                headers: {
                    "access-token": token,
                    "token-type": "Bearer",
                    client: client,
                    uid: uid,
                    Expires: 0,
                },
            });
            setOpenSuccess(true)

        } catch (error) {
            // Tratar erros, se necessário
            console.error('Erro ao enviar dados:', error);
        }
    };

    const ModalSucess = ({ open, onClose }) => {
        return (
          <Modal open={open} onClose={onClose} className="grid place-items-center"
            slotProps={{
              backdrop: {
                sx: {
                  backgroundColor: "rgba(0, 0, 0, 0.3)", // Ajuste a opacidade conforme necessário
                },
              },
            }}>
            <div className="flex flex-col justify-center bg-ice-HC-dark p-5 rounded">
              <p className="text-xl justify-center flex text-darkGray-HC-white-underline mb-2">
                Recurso editado com sucesso!
              </p>
              <div className="flex flex-row mt-2 justify-center gap-3">
                <button
                  className="text-sm text-darkGray-HC-white-underline border-main rounded-lg normal-case font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
                  onClick={() => onClose()}
                >
                  OK
                </button>
              </div>
            </div>
          </Modal>
        );
      };

    return (
        <Modal
            open={open}
            onClose={onClose}
            className="grid place-items-center"
        >
            <div className="bg-ice-HC-dark p-6 rounded-lg">
            <ModalSucess  open={openSuccess} onClose={() => setOpenSuccess(false)}/>

                <div className="flex justify-center mb-4">

                    <p className="text-darkGray-HC-white-underline text-xl font-bold ">Editar recurso</p>
                </div>
                <FieldLabel
                    name="Título do Recurso*"
                    error={(!title)}
                />
                <CustomTextField
                    multiline
                    fullWidth
                    value={title}
                    placeholder={"Ex: Jogo Virtual sobre os Biomas do Brasil"}
                    onChange={handleTitleChange}
                    helperText={<div className=" w-full justify-end flex">
                        {title.length}/100
                    </div>}
                    error={(title.length > 100) || (!title)}
                    className="mb-5"
                    sx={{
                        "& .MuiOutlinedInput-input::placeholder": {
                            color: "var(--darkGray-HC-white)",
                            opacity: 0.5,
                        },
                    }}
                />
                <FieldLabel name="Descrição geral do Recurso*" error={(!description)} />
                <CustomTextField
                    multiline
                    rows={5}
                    fullWidth
                    value={description}
                    placeholder={"Quais assuntos são contemplados neste recurso? Para quais objetivos este recurso pode ser destinado?"}
                    onChange={handleDescriptionChange}
                    helperText={<div className=" w-full justify-end flex">
                        {description.length}/1500
                    </div>}
                    error={(description.length > 1500) || (!description)}
                    className="mb-5"
                />
                <div className="flex w-full justify-end p-3">

                    <Button
                        onClick={() => { setEditOpen(false) }}
                        type="button"
                        variant="text"
                        className="normal-case w-36 text-base text-darkGray-HC-white-underline font-bold mr-2 outline outline-1 outline-ice-HC-white hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline"
                    >
                        Fechar
                    </Button>
                    <Button
                        onClick={() => fetchData()}
                        type="submit"
                        className="border-turquoise-HC-white w-36 rounded-lg hover:bg-darkTurquoise-HC-dark bg-turquoise-HC-white text-base text-white-HC-dark-underline hover:text-white-HC-underline font-bold normal-case flex"
                        variant="outlined"
                    >
                        Continuar
                    </Button>
                </div>
            </div>
        </Modal>
    )
}