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 [id, setId] = 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 ?? "");
            setId(resource?.learning_object.id)
        } else if (resource?.id) {
            setTitle(resource.name);
            setId(resource.id)
            setDescription(resource.description);
        }
    }, [resource]);


    console.log("resource", resource, resource.learning_object)
    if (!resource?.id) return null;

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

    const fetchData = async () => {
        let resourceDraftNew = { ...resource }

        if (resource?.learning_object) {
            resourceDraftNew.learning_object.name = title;
            resourceDraftNew.learning_object.description = description;
        } else if (resource?.id) {
            resourceDraftNew.name = title;
            resourceDraftNew.description = description;
        }
        const payload = {
            "learning_object": {
                id: id,
                name: resource?.learning_object?.name ?? resource.name,
                description: resource?.learning_object?.description ?? resource.description,
                language_ids: (resource?.language)?.map(l => l.id)
            }
        }


        //:author, :name, :curator, :object_type_id, :description, :license_id, :terms_of_service, :thumbnail, :software, :link,  :magnetlink, language_ids: [
        console.log("aa",  (resource?.language)?.map(l=>l.id)  )

        try {
            await mecredApi.put(`/learning_objects/${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>
    )
}