import React, { useEffect } from "react";
import { VerticalList } from "react-key-navigation";
import CompanyHeader from "./CompanyHeader";
import PersonHeader from "./PersonHeader";
import PersonActivities from "../Activities/PersonActivities";
import usePersonHeader from "./modules/usePersonHeaderQuery";
import HistoryContainer from "../Search/modules/history-container";
import { Provider as PersonContextProvider } from "./PersonContext";
import { NewActivityContainer } from "./modules/useNewActivityContainer";
import ScheduleActivity from "./PersonScheduleActivity";
import { ActivityListContext } from "./modules/activity-list-context";

export function PersonPage({ personId, person }) {
  return (
    <VerticalList focusId="PersonPage">
      <CompanyHeader companyName={person.Company} focusId="CompanyHeader" />
      <PersonHeader
        forceFocus
        name={person.Name}
        title={person.Title}
        interests={person.Interests}
        status={person.Status}
        image={person.PhotoUrl}
        focusId="PersonHeader"
      />
      <ActivityListContext.Provider>
        <ScheduleActivity personId={personId} />
        <PersonActivities personId={personId} />
      </ActivityListContext.Provider>
    </VerticalList>
  );
}

export default function PersonPageContainer({ personId }) {
  const { data, loading, error } = usePersonHeader(personId);
  const { push } = HistoryContainer.useContainer();

  useEffect(() => {
    if (!data.getLeadById) {
      return;
    }
    const person = data.getLeadById;
    push({
      Id: person.Id,
      Name: person.Name,
      PhotoUrl: person.PhotoUrl,
      Company: person.Company
    });
  }, [data.getLeadById, push]);
  if (loading) {
    return <span>Loading</span>;
  }
  if (error) {
    return <span>{error.message}</span>;
  }
  return (
    <PersonContextProvider person={data.getLeadById}>
      <NewActivityContainer.Provider>
        <PersonPage personId={personId} person={data.getLeadById} />
      </NewActivityContainer.Provider>
    </PersonContextProvider>
  );
}