import React, { useEffect, useState } from "react";
import { getSuppliers } from "../api/supplierApi";
import { getShipments } from "../api/shipmentApi";
import { getDeliveries } from "../api/deliveryApi";
import PageHeader from "../components/PageHeader";

function Dashboard() {
  var countState = useState({ suppliers: 0, shipments: 0, deliveries: 0 });
  var counts = countState[0];
  var setCounts = countState[1];

  useEffect(function () {
    function loadDashboard() {
      Promise.all([
        getSuppliers(),
        getShipments(),
        getDeliveries(),
      ])
      .then(function (responses) {
        setCounts({
          suppliers: responses[0].data.length,
          shipments: responses[1].data.length,
          deliveries: responses[2].data.length,
        });
      });
    }

    loadDashboard();
  }, []);

  var cards = [
    { title: "Suppliers", value: counts.suppliers },
    { title: "Shipments", value: counts.shipments },
    { title: "Deliveries", value: counts.deliveries },
  ];

  return (
    <div>
      <PageHeader title="Dashboard" subtitle="Summary of supply chain records" />

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {cards.map(function (card) {
          return (
          <div key={card.title} className="rounded-md border border-slate-200 bg-white p-5">
            <p className="text-sm font-semibold text-blue-800">{card.title}</p>
            <p className="mt-3 text-3xl font-bold">{card.value}</p>
          </div>
          );
        })}
      </div>

      <section className="mt-6 rounded-md border border-slate-200 bg-white p-5">
        <h3 className="font-bold">System Purpose</h3>
        <p className="mt-2 text-sm leading-6 text-blue-800">
          This system helps SupplyNet Ltd manage suppliers, shipments, deliveries, and printable reports using a simple MERN stack application.
        </p>
      </section>
    </div>
  );
}

export default Dashboard;
