import Component from "./Component";
import * as React from "react";
import { Query, Mutation } from "react-apollo";
import { withRouter, RouteComponentProps } from "react-router";

const FETCH_CURRENT_USER = require("./fetchCurrentUser.gql");
const CREATE_CONTRACT = require("./createContract.gql");

class FetchCurrentUserQuery extends Query<{
  user: any;
  orgs: any;
}> {}

class CreateContractMutation extends Mutation<{}> {}

const update = (history: any) => (cache, result) => history.push("/my-page");

const QueryComponent: React.SFC<RouteComponentProps<{}>> = ({ history }) => (
  <FetchCurrentUserQuery query={FETCH_CURRENT_USER} fetchPolicy="network-only">
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      else if (error) return <p>Error :(</p>;
      else
        return (
          <CreateContractMutation
            mutation={CREATE_CONTRACT}
            update={update(history)}
          >
            {mutate => {
              const createContract = input => mutate({ variables: { input } });
              return (
                <Component user={data!.user} orgs={data!.orgs} createContract={createContract} />
              );
            }}
          </CreateContractMutation>
        );
    }}
  </FetchCurrentUserQuery>
);

export default withRouter(QueryComponent);