import "../css/Global.css";
import axios from "axios";
import React, { useState } from "react";

const sortTypes = {
  up: {
    class: "sort-up",
    fn: (a, b) => a.city.localeCompare(b.city)
  },
  down: {
    class: "sort-down",
    fn: (a, b) => b.city.localeCompare(a.city)
  },
  default: {
    class: "sort",
    fn: (a, b) => a
  }
};

const CompaniesTable = ({
  companies,
  loading,
  currentPage,
  companiesPerPage
}) => {
  const [currentState, setCurrentState] = useState("default");
  const companiesIncome = [];

  const onSortChange = () => {
    const currentSort = currentState;
    let nextSort;

    if (currentSort === "default") nextSort = "up";
    else if (currentSort === "up") nextSort = "down";
    else if (currentSort === "down") nextSort = "default";

    setCurrentState(nextSort);
  };

  const fetchIncomes = async id => {
    const res = await axios.get(
      `https://recruitment.hal.skygate.io/incomes/${id}`
    );
    companiesIncome.push(res.data);
  };

  const calcTotalIncome = id => {
    let totalIncome = 0;
    return totalIncome;
  };

  if (loading) {
    return <h2>Loading...</h2>;
  }
  const currentSort = currentState;
  const data = [...companies].sort(sortTypes[currentSort].fn);
  const indexOfLastCompany = currentPage * companiesPerPage;
  const indexOfFirstCompany = indexOfLastCompany - companiesPerPage;
  const currentCompanies = data.slice(indexOfFirstCompany, indexOfLastCompany);

  return (
    <div className="companies-table">
      <h1 id="title">Companies Details</h1>
      <table id="companies">
        <tbody>
          <tr>
            <th>
              ID
              <button onClick={onSortChange}>
                <i className={`fas fa-${sortTypes[currentSort].class}`} />
              </button>
            </th>

            <th>Name</th>
            <th>City</th>
            <th>Total Income</th>
            <th>Average Income</th>
            <th>Last Month Income</th>
          </tr>
          {currentCompanies.map(
            company => (
              fetchIncomes(company.id),
              (
                <tr key={companies.id}>
                  <td>{company.id}</td>
                  <td>{company.name}</td>
                  <td>{company.city}</td>
                  <td>{calcTotalIncome(company.id)}</td>
                  <td>TEST</td>
                  <td>TEST</td>
                </tr>
              )
            )
          )}
        </tbody>
      </table>
      <table id="companies"></table>
    </div>
  );
};

export default CompaniesTable;