import React, { Component } from "react";

import { callAPI } from "../actions/API";
import Cards from "./Pages/Cards";
import GenericList from "../root/Pages/GenericList";
import TimeSlotHelper from "./Pages/TimeSlotHelper";

// Homepage/Cards, first API call here to pass down to cards
// and the pending migration list, if there's no data, nothing will show
// This would benefit from an error/notification if there is no data
//
// Two main components linked here are the Dashboard, and the SideMigrations comp,
// SideMigrations calls the pending migration list, with its own API call
// Dashboard performs the rendering of the cards and the numbers from each migration status.

export class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      migs: [],
      timeslots: [],
    };
  }

  getTimeslot(days) {
    callAPI
      .get("/timeslots/?days=" + days)
      .then((request) => {
        return request.data;
      })
      .catch((error) => {
        this.setState({
          error: error,
        });
      });
  }

  componentDidMount() {
    callAPI
      .get("/")
      .then((request) => {
        this.setState({
          migs: request.data,
        });
      })
      .catch((error) => {
        this.setState({
          error: error,
        });
      });
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col s12"></div>
        </div>
        <div className="row">
          <div className="col s4 18">
            <Cards migs={this.state.migs} />
          </div>
          <div className="col s8 12">
            {/* <p>Current availability for {Date()}</p>
            <UList listItems={builfArrayFromObject(this.state.timeslots)} /> */}
            <TimeSlotHelper />
          </div>
          <div className="row">
            <div className="col s12">
              <GenericList APILINK="/pending/" />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;