import { useState, useEffect } from "react";
import Card from "../reusableCard/index";
import { addNote, showNotes, hideNotes } from "../../assets/SvgIcons/SvgIcons";

const StickyNote = () => {
  const [notes, setNotes] = useState([]);
  const [showNote, setShowNote] = useState(true);

  useEffect(() => {
    const savedNotes = JSON?.parse(localStorage?.getItem("stickyNotes")) || [];
    setNotes(savedNotes);
  }, []);

  const handleShowNote = () => {
    setShowNote(!showNote);
  };

  const handleAddNote = () => {
    setNotes([...notes, { id: Date.now(), content: "" }]); //Reference
  };

  const handleDeleteNote = (id) => {
    setNotes(notes?.filter((note) => note?.id !== id));
  };

  const handleSaveNote = (id, content) => {
    let notesData = notes?.map((note) =>
      note?.id === id ? { ...note, content } : note
    );
    setNotes(notesData);
    localStorage?.setItem("stickyNotes", JSON.stringify(notes));
  };

  return (
    <>
      <div className=" h-30 sm:h-20 w-full text-center text-4xl transition scale-110">
        <p className="uppercase py-8 font-bold scale-110 cursor-pointer">Sticky Notes Application</p>
      </div>
      <hr className="h-0.5 mx-auto my-4 bg-gray-100 border-0 rounded md:my-5 dark:bg-gray-700" />
      <div className="p-6 gap-10 flex justify-center">
        <button onClick={handleAddNote} className="">
          <div className="relative inline-flex items-center justify-center p-4 px-6 py-3 overflow-hidden font-medium text-white transition duration-300 ease-out border-2 border-black rounded-full shadow-md group">
            <span className="absolute inset-0 flex items-center justify-center w-full h-full text-white duration-300 -translate-x-full bg-green-600 group-hover:translate-x-0 ease">
              {addNote}
            </span>
            <span className="absolute flex items-center justify-center w-full h-full text-black bg-gradient-to-r from-green-600 to-amber-300 transition-all duration-300 transform group-hover:translate-x-full ease">
              Add note
            </span>
            <span className="relative invisible">Add Note</span>
          </div>
        </button>

        <button
          onClick={() => {
            handleShowNote();
          }}
          className=""
        >
          <div className="relative inline-flex items-center justify-center p-4 px-5 py-3 overflow-hidden border-2 border-black font-medium text-green-400 transition duration-300 ease-out rounded-full shadow-xl group hover:ring-green-950">
            <span className="absolute inset-0 w-full h-full bg-gradient-to-br from-green-100- via-green-600 to-green-100"></span>
            <span className="absolute bottom-0 right-0 block w-64 h-64 mb-32 mr-4 transition duration-500 origin-bottom-left transform rotate-45 translate-x-24 bg-green-600 rounded-full opacity-30 group-hover:rotate-90 ease"></span>
            <span className="relative text-black">
              {showNote ? (
                <>
                  <span className="flex justify-between gap-3">
                    Hide Notes {hideNotes}
                  </span>
                </>
              ) : (
                <>
                  <span className="flex justify-between gap-3">
                    Show Notes {showNotes}
                  </span>
                </>
              )}
            </span>
          </div>
        </button>
      </div>
      <div className="p-10 flex flex-wrap gap-10">
        {notes?.length > 0 ? (
          notes
            ?.filter((note) => note?.content || showNote)
            ?.map((note) => (
              <Card
                key={note?.id}
                id={note?.id}
                content={note?.content}
                onDelete={() => handleDeleteNote(note?.id)}
                onSave={handleSaveNote}
              />
            ))
        ) : (
          <div className="w-full text-center justify-center text-xl text-gray-600">
            No Notes are available. Click on <b>&quot;Add Note button&quot;</b>{" "}
            above to add
          </div>
        )}
      </div>
    </>
  );
};

export default StickyNote;