import React, {useEffect, useState} from "react";
import Editor from "../common/TextEditor/Editor";
import Avatar from "../common/Avatar";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { showText } from "pdf-lib";
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
import moment from "moment";
import {getCachedData} from "../../slices/apiDataManager";
import NoteCardDirectory from "./NoteCardDirectory";
import showToast from "../../services/toastService";

const schema = z.object({
  note: z.string().min(1, { message: "Note is required" }),
});

const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
{
  const [ NotesData, setNotesData ] = useState()
  const[IsSubmitting,setIsSubmitting] = useState(false)
  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema),
    defaultValues: {
      note: "",
    },
  });

  const noteValue = watch("note");

  const handleEditorChange = (value) => {
    setValue("note", value, { shouldValidate: true });
  };

  const onSubmit = async (data) => {
    const newNote = { ...data, contactId: contactProfile?.id };
    try
    {
      setIsSubmitting(true)
        const response = await DirectoryRepository.CreateNote( newNote );

         const createdNote = response.data; 

      setProfileContact((prev) => ({
        ...prev,
        notes: [...(prev.notes || []), createdNote],
      }));

      setValue("note", "");
        const result = response.data
        const cache_notes = getCachedData( "Contact Note" )
      
  setIsSubmitting(false)
            showToast("Note added successfully!", "success")
    } catch ( error )
    {
      setIsSubmitting(false)
      const msg =
        error.response.data.message ||
        error.message ||
        "Error occured during API calling";
      showToast(msg, "error");
    }
  };

  const onCancel = () => {
    setValue("note", "");
  };

  return (
    <div className="text-start">
      <form onSubmit={handleSubmit(onSubmit)}>
        <Editor
          value={noteValue}
          loading={IsSubmitting}
          onChange={handleEditorChange}
          onCancel={onCancel}
          onSubmit={handleSubmit(onSubmit)}
        />
        {errors.notes && (
          <p className="text-danger small mt-1">{errors.note.message}</p>
        )}
      </form>
      <div
        className=" justify-content-start overflow-auto px-1"
        style={{ maxHeight: "300px", minHeight: "100px" }}
      >
        {isLoading && <div className="text-center"> <p>Loading...</p> </div>}
        {!isLoading && contactProfile?.notes?.map((noteItem) => (
          <NoteCardDirectory noteItem={noteItem} contactId={contactProfile?.id} setProfileContact={setProfileContact} key={noteItem.id}  />
        ))}
      </div>
    </div>
  );
};

export default NotesDirectory;