import React from 'react';
import logo from './logo.svg';
import './App.css';
import produce from 'immer';
import { useState } from 'react';






 

  /*const Notes = props => props.data.map(note => <div>{note.text}</div>);
  const initialData = [{ text: 'Hey' }, { text: 'There' }];
  const [data, setData] = useState(initialData);

  const handleClick = () => {
    const text = document.querySelector('#noteinput').value.trim();
    if (text) {
      const nextState = produce(data, draftState => {
        draftState.push({ text });
      });
      document.querySelector('#noteinput').value = '';
      setData(nextState);
    }
  };
  return (
    <div className="App">
     <input id="noteinput" style={{ width: '80%' }} type="text" placeholder="Enter a new note" />
      <button onClick={() => handleClick()}>Add note</button>
      <Notes data={data} />
    </div>
  );
}*/
function App() {
    const [input, setInput] = useState("");
    const [list, setList] = useState([]);
    const [visible, setVisible] = useState(null);
  const addToList = e => {
    setList([ ...list, input ]);
    setInput("");
  };

  const deleteList = id => e => {
    setList(list.filter((item, index) => index !== id));
  };

  function hideMe(){
    setVisible(false);
  }

  let style = { textDecoration: "none" };
  if (!visible) style.textDecoration = "line-through";


    return(
     
      <div className="App">
      <input type="text" placeholder="First Name" onChange={e => setInput(e.target.value)} />
      <button type="button" onClick={addToList}>Submit</button>
    <ul>
    {list.map((item,index) =>
  <li key={item} style={style}>
    {item}
    <button type="button" onClick={deleteList(index)}>Delete</button>
    <button type="button"  onClick={hideMe}>Completed</button>
    </li> )}     
    </ul>
    

  </div>
      );
    }
  
  
  
  
export default App;