import React, { useEffect, useState } from 'react';
import {
  getUsers,
  User,
  getAircrafts,
  Aircraft,
  getFlights,
  Flight,
  getOrganizations,
  Organization,
  getAircraftFAA,
  AircraftFAA,
  getAirportsNorthAmerica,
  AirportNorthAmerica,
  getLogs,
  Log,
} from '../airtable-data';

export default () => {
  const [users, setUsers] = useState<User[]>([]);
  const [aircrafts, setAircrafts] = useState<Aircraft[]>([]);
  const [flights, setFlights] = useState<Flight[]>([]);
  const [organizations, setOrganizations] = useState<Organization[]>([]);
  const [aircraftFAAs, setAircraftFAAs] = useState<AircraftFAA[]>([]);
  const [logs, setLogs] = useState<Log[]>([]);
  const [airportsNorthAmerica, setAirportsNorthAmerica] = useState<
    AirportNorthAmerica[]
  >([]);
  useEffect(() => {
    getUsers().then(({ records }) => {
      setUsers(records);
    });

    getAircrafts().then(({ records }) => {
      setAircrafts(records);
    });

    getFlights().then(({ records }) => {
      setFlights(records);
    });

    getOrganizations().then(({ records }) => {
      setOrganizations(records);
    });

    getAircraftFAA().then(({ records }) => {
      setAircraftFAAs(records);
    });

    getLogs().then(({ records }) => {
      setLogs(records);
    });

    getAirportsNorthAmerica().then(({ records }) => {
      setAirportsNorthAmerica(records);
    });
  }, []);

  // console.log({
  //   users,
  //   aircrafts,
  //   flights,
  //   organizations,
  //   aircraftFAAs,
  //   logs,
  //   airportsNorthAmerica,
  // });

  return (
    <div>
      <h1>Real Data loading placeholder (see console)</h1>
      <h5>users records: {users.length}</h5>
      <h5>aircrafts records: {aircrafts.length}</h5>
      <h5>flights records: {flights.length}</h5>
      <h5>organizations records: {organizations.length}</h5>
      <h5>logs records: {logs.length}</h5>
      <h5>airportsNorthAmerica records: {airportsNorthAmerica.length}</h5>
      <h5>aircraftFAAs records: {aircraftFAAs.length}</h5>
    </div>
  );
};