import React from "react";
import { connect } from "react-redux";

import "../formStyles/reviewForm.css";
import { useQuery } from "@apollo/react-hooks";

import { getDraftQuery as GET_DRAFT_QUERY } from "../../../queries/draft";

//Actions
import { updateProjectData } from "../../../actions/resumeFormActions.js";

//Import Components
import ProjectCard from "./projectCard";

import { Card } from "@material-ui/core";

import mapStateToProps from "../../mappingState.js";

function ProjectsComponent(props) {
  const id = localStorage.getItem("draftID");
  const { loading, error, data } = useQuery(GET_DRAFT_QUERY, {
    variables: { id },
  });

  if (loading) return <p>loading</p>;
  if (error) return <p>ERROR: {error.message}</p>;
  if (!data) return <p>Not found</p>;

  if (data) {
    return (
      <Card>
        <h1>Projects</h1>
        {data.getDraft.project.map((project) => {
          return (
            <div key={project.id}>
              <ProjectCard
                projects={project}
                updateProjectData={props.updateProjectData}
              />
            </div>
          );
        })}
      </Card>
    );
  }
}

export default connect(mapStateToProps, { updateProjectData })(
  ProjectsComponent
);