"use client";
import { useState } from "react";
import Input from "./message";
import Navigationhome from "./navigation";

export default function Homee() {
  const [showInput, setShowInput] = useState(false); // State to control Input visibility

  return (
    <div className="bg-custom-image bg-cover w-full h-full bg-pinkk relative">
      {/* Main Home Content */}
      {!showInput && ( // Only show this when Input is not visible
        <div className="relative z-0">
          <h1 className="text-6xl text-pinkk-300 mx-6 py-10">Home</h1>
          <div className="my-3">
            <Input />
            <button
              onClick={() => setShowInput(true)} // Show Input on button click
              className="text-pinkk-300 text-4xl transform translate-x-[320%] translate-y-[500%]"
            >
              <img src="/plus.svg" alt="" />
            </button>
          </div>
          <Navigationhome />
        </div>
      )}
    </div>
  );
}

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

interface Note {
  id: number;
  text: string;
  top: number; // position from top
  left: number; // position from left
}

const Input = () => {
  const [notes, setNotes] = useState<Note[]>([]);
  const [inputText, setInputText] = useState<string>("");

  // Load notes from local storage on component mount
  useEffect(() => {
    const savedNotes = localStorage.getItem("notes");
    if (savedNotes) {
      setNotes(JSON.parse(savedNotes));
    }
  }, []);

  // Save notes to local storage whenever they change
  useEffect(() => {
    localStorage.setItem("notes", JSON.stringify(notes));
  }, [notes]);

  // Handle input text change
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputText(e.target.value);
  };

  // Add a note to the list
  const handleAddNote = () => {
    if (inputText.trim()) {
      // Set the bounds for note position (ensure it stays within the SVG)
      const maxX = 80; // Maximum percentage for left position (0 to 100)
      const maxY = 80; // Maximum percentage for top position (0 to 100)

      setNotes([
        ...notes,
        {
          id: Date.now(),
          text: inputText.trim(),
          top: Math.random() * maxY,
          left: Math.random() * maxX,
        },
      ]);
      setInputText(""); // Clear input after adding
    }
  };

  // Delete a note by id
  const handleDeleteNote = (id: number) => {
    setNotes(notes.filter((note) => note.id !== id));
  };

  return (
    <div className="relative w-full h-[500px]">
      {/* Notes Input */}
      <div className=" z-10">
      <div className="flex flex-col h-[500px]">
        <div className="flex flex-row justify-between px-5">
          <img src="/back.svg" alt=""  />
          <button
          onClick={handleAddNote}>
          <img src="/save.svg" alt="" />
          </button>
        </div>
        <div className="flex-grow p-4">
        
        <textarea
          placeholder="Title"
          className="w-full h-10 bg-transparent border-none text-pinkk-300 text-2xl placeholder-pinkk-300 placeholder:text-5xl placeholder:font-bold resize-none focus:outline-none"
        />
        <textarea
          placeholder="Type something..."
          className="w-full h-40 bg-transparent border-none text-pinkk-300 text-lg placeholder-pinkk-300 placeholder:text-xl placeholder:font-medium resize-none focus:outline-none"
        />
        <div className="absolute top-0 left-0 z-10 p-4">

        <input
          type="text"
          value={inputText}
          onChange={handleInputChange}
          className="border-2 rounded-md p-2"
          placeholder="Enter your note"
        />
        
          
      </div>

      </div>
        </div>
      </div>

     

{/* Display notes */}
      
      <div className="absolute top-5 left-2 right-0 bottom-">
        {notes.map((note) => (
          <div
            key={note.id}
            className="bg-message bg-cover bg-contain bg-no-repeat text-pinkk-300 p-4 mb-5 rounded-md h-[113px] flex items-center"
          >
            <p className="w-fit px-5 bg-pinkk-100 rounded-xl translate-y-[-180%] translate-x-[-24%] rotate-23 overflow-visible m-0">
              abhay
            </p>
            <button
              onClick={() => handleDeleteNote(note.id)}
              className="px-5 ml-2 translate-y-[60%] translate-x-[-150%] mr-0"
            >
             <img src="/dustbin.svg" alt="" className="w-12 h-12" />
            </button>

            <p className="w-full whitespace-normal break-words text-xl text-left translate-x-[-60%]">
              {note.text}
            </p>

           
          </div>
        ))}
      </div>
    </div>
  );
};

export default Input;