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

const FETCH_ORG = require("./fetchOrg.gql");
const JUDGE_CONTRACT = require("./judgeContract.gql");

interface Props {
  org: any;
}

class FetchContractQuery extends Query<Props> {}
class JudgeContractMutation extends Mutation<{}> {}

const update = (history: any) => (cache, result) => history.push('/org');

const QueryComponent: React.SFC<RouteComponentProps<{}> & Props> = props => (
  <FetchContractQuery
    query={FETCH_ORG}
    fetchPolicy="network-only"
    variables={{ id: props.match.params["id"] }}
  >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      else if (error || !data!.org) return <p>Error :(</p>;
      else
        return (
          <JudgeContractMutation
            mutation={JUDGE_CONTRACT}
            update={update(history)}
          >
            {mutate => {
              const confirm = (id, review) => {
                mutate({ variables: { id, ok: true, review } });
                props.history.push('/org');
              }
              const reject = (id, review) => {
                mutate({ variables: { id, ok: false, review } });
                props.history.push('/org');
              }
              return (
                <Component org={data!.org} confirm={confirm} reject={reject} />
              );
            }}
          </JudgeContractMutation>
        );
    }}
  </FetchContractQuery>
);

export default withRouter(QueryComponent);