import React, { Component } from 'react';
import axios from 'axios';
import Table from './components/tables';
import AddForm from './components/addForm';
import EditForm from './components/editForm';
import './App.css';

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      users: [],
      status: false,
      currentUser: {
        id: null,
        firstName: '',
        surname: '',
        dob: '',
        age: '',
        height: '',
      }
    }
  }


  fetchUsers = async () => {
    const {data} = await axios.get('https://cashbox-backend-node.herokuapp.com/records');
    this.setState({ users: [ ...data.data ] });
  }

  componentDidMount = () => {
      this.fetchUsers();
  }

  editUser = user => {
    this.setState({ status: true, currentUser: { ...user } });
  }

  updateUser = (id, updatedUser) => {
    this.setState({
        status: false,
        currentUser: this.state.users.map(user => (user.id === id ? updatedUser : user))
    });
  }

  addUser = async (user) => {
    user.id = user.length + 1;
    const res = await axios.post('https://cashbox-backend-node.herokuapp.com/records', user);
    this.setState({ users: [...this.state.users, user] });
  }

  deleteUser = id => {
    this.setState({
        status: false,
        currentUser: this.state.users.filter(user => user.id !== id)
    });
  }

  render = () => {
    return (
        <div className='container'>
        <h1> Record Management</h1>

        <div>
            {
            this.state.status ? (
                <div>
                <h2>Edit User</h2>
                <EditForm 
                    currentUser={this.state.currentUser}
                    updateUser={this.updateUser}
                    setEditStatus={this.state.status}
                    editStatus={this.state.status}
                />
                </div>
            ) : (
                <div className=''>
                    <h2> Add user</h2>
                    <AddForm addUser={this.addUser} />
                </div>
                )
            }
        </div>

        <div className=''>
            <h2>View Users</h2>
            <Table users={this.state.users} deleteUser={this.deleteUser} editUser={this.editUser} />
        </div>

        </div>
    )
  }
}

export default App;