import React from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';

var emptyCustomer = { customerNumber: '', firstName: '', lastName: '', telephone: '', address: '' };

function Customers(props) {
  var customersState = useState([]);
  var customers = customersState[0];
  var setCustomers = customersState[1];
  var formState = useState(emptyCustomer);
  var form = formState[0];
  var setForm = formState[1];

  var token = props.session ? props.session.token : '';
  var headers = { Authorization: 'Bearer ' + token };

  function load() {
    axios.get(props.API + '/customers', { headers: headers })
      .then(function(res) {
        setCustomers(res.data);
      })
      .catch(function() {});
  }

  useEffect(function() { load(); }, []);

  function submit() {
    if (!form.customerNumber || !form.firstName || !form.lastName || !form.telephone || !form.address) {
      props.setNotice('All fields are required');
      return;
    }
    axios.post(props.API + '/customers', form, { headers: headers })
      .then(function() {
        setForm(emptyCustomer);
        return load();
      })
      .then(function() {
        props.setNotice('Customer saved successfully');
      })
      .catch(function(err) {
        var msg = 'Could not save';
        if (err.response && err.response.data) {
          msg = err.response.data.message || err.response.data.error || msg;
        }
        props.setNotice(msg);
      });
  }

  return (
    <main className="page">
      <div className="page-title"><h2>Customers</h2><p>Manage customer records.</p></div>
      <section className="form-grid">
        <input placeholder="Customer Number" value={form.customerNumber} onChange={function(e) { setForm({ customerNumber: e.target.value, firstName: form.firstName, lastName: form.lastName, telephone: form.telephone, address: form.address }); }} />
        <input placeholder="First Name" value={form.firstName} onChange={function(e) { setForm({ customerNumber: form.customerNumber, firstName: e.target.value, lastName: form.lastName, telephone: form.telephone, address: form.address }); }} />
        <input placeholder="Last Name" value={form.lastName} onChange={function(e) { setForm({ customerNumber: form.customerNumber, firstName: form.firstName, lastName: e.target.value, telephone: form.telephone, address: form.address }); }} />
        <input placeholder="Telephone" value={form.telephone} onChange={function(e) { setForm({ customerNumber: form.customerNumber, firstName: form.firstName, lastName: form.lastName, telephone: e.target.value, address: form.address }); }} />
        <input placeholder="Address" value={form.address} onChange={function(e) { setForm({ customerNumber: form.customerNumber, firstName: form.firstName, lastName: form.lastName, telephone: form.telephone, address: e.target.value }); }} />
        <button onClick={submit}>Submit Data</button>
      </section>
      <div className="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Number</th><th>First Name</th><th>Last Name</th><th>Telephone</th><th>Address</th>
            </tr>
          </thead>
          <tbody>
            {customers.length === 0 ? (
              <tr><td colSpan="5" style={{ textAlign: 'center', color: '#94a3b8', padding: 20 }}>No customers found</td></tr>
            ) : customers.map(function(c) {
              return (
                <tr key={c._id}>
                  <td>{c.customerNumber}</td><td>{c.firstName}</td><td>{c.lastName}</td><td>{c.telephone}</td><td>{c.address}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </main>
  );
}

export default Customers;
