import React, { useState } from 'react';

import "./edit.css";

import { CiSquarePlus } from "react-icons/ci";

import { CgMoreVertical } from "react-icons/cg";

import { AiTwotoneDelete } from "react-icons/ai";

​

function App() {

  const [baslik, setBaslik] = useState('');

  const [not, setNot] = useState('');

  const [data, setData] = useState([]);

  const [warning, setWarning] = useState(false);

  const [edit, setEdit] = useState(-1);

  const [editedText, setEditedText] = useState("");

  const [complatedItems, setComplatedItems] = useState([]);

  const [showComplatedButtons, setShowComplatedButtons] = useState(data.map(() => false));

​

  const mapEt = () => {

    if (not !== "") {

      const yenidata = {

        baslik: baslik,

        not: not,

        completed: false,

      };

​

      setData([yenidata, ...data]);

      setBaslik('');

      setNot('');

      setWarning(false);

      setShowComplatedButtons([...showComplatedButtons, false]);

    } else if (not === "") {

      setWarning(true);

    }

  };

​

  const handleDelete = (index) => {

    const yeniData = [...data];

    const yeniButtons = [...showComplatedButtons];

    yeniData.splice(index, 1);

    yeniButtons.splice(index, 1);

    setData(yeniData);

    setShowComplatedButtons(yeniButtons);

  };

​

  const editfonksiyonu = (index) => {

    setEdit(index);

    setEditedText(data[index].not);

  };

​

  const SaveEditedText = (index) => {

    const newData = [...data];

    newData[index].not = editedText;

    setData(newData);

    setEdit(-1);

    setEditedText("");

  };

​

  const toggleComplatedButton = (index) => {

    const complated = [...showComplatedButtons];

    complated[index] = !complated[index];

    setShowComplatedButtons(complated);

  };

​

  return (

    <>

      <h1 style={{ marginLeft: "600px" }}>ToDo List</h1>

​

      <div className='inputs'>

        <div>

          <input

            className='titleinput'

            placeholder='Title...'

            type="text"

            id="baslik"

            maxLength={35}

            value={baslik}

            onChange={(e) => setBaslik(e.target.value)}

          />

​

          <div>

            <input

              placeholder='Your Note...'

              className='aboutinput'

              type="text"

              id="not"

              value={not}

              onChange={(e) => setNot(e.target.value)}

            />

          </div>

​

          <CiSquarePlus className="addbutton" onClick={mapEt} />

        </div>

      </div>

      <ul>

        {data.map((item, index) => (

          <li key={index}>

            <div className='full' style={{ backgroundColor: complatedItems.includes(index) ? "lightgreen" : "lightpurple" }}>

              <h1 className='baslik'>

                {item.baslik}

                <CgMoreVertical onClick={() => toggleComplatedButton(index)} />

                <AiTwotoneDelete className='delete' onClick={() => handleDelete(index)} />

              </h1>

              <h4 className='not'>{item.not}</h4>

              {showComplatedButtons[index] && (

                <button onClick={() => complatedfunc(index)}>

                  {item.completed ? "Mark as Incomplete" : "Mark as Complete"}

                </button>

              )}

            </div>

          </li>

        ))}

        <div>

          {warning && <h4 style={{ marginLeft: "540px" }}>Note cannot be empty.</h4>}

        </div>

      </ul>

    </>

  );

}

​

export default App;