import React from 'react';
import './App.css';
import axios from "axios";
import { InputField, TodoWrapper } from './components';

function App() {
  const [data, setData] = React.useState([]);
  const styles = {
    header: {
      color: "grey"
    }
  }
  React.useEffect(() => {
    axios.get('todos')
      .then(res => setData(res.data))
      .catch(err => console.log(err))

  }, [])
  function handleRemove(id) {
    const newArr = data.filter(remtask => remtask !== id)
    console.log(newArr);
    axios.post(`todos/${id._id}`)
      .then(res => console.log(res))
      .catch(err => console.log(err))
    setData(newArr)
  }

  function handleClick(title) {
    axios.post("todos", { title: title })
      .then(res => { console.log(res);window.location.reload() })
      .catch(err => console.log(err))
  }
  return (
    <div className="App">
      <h1 style={styles.header}>
        Simple Todo App
      </h1>
      <InputField handleClick={handleClick} />
      <TodoWrapper data={data} handleRemove={handleRemove} />
    </div>
  );
}

export default App;