text: import React from "react";
  import { APIClient, Openlaw } from "openlaw";
  import { Container, Loader, Button, Message } from "semantic-ui-react";
  import "semantic-ui-css/semantic.min.css";
  import "openlaw-elements/dist/openlaw-elements.min.css";
  import OpenLawForm from "openlaw-elements";
  import AgreementPreview from "./AgreementPreview";
  import "../App.css";
  require("dotenv").config();
  
  const openLawConfig = {
    server: "https://app.openlaw.io",
    templateName: "Y-COMBINATOR SERIES A TERM SHEET",
    userName: "josh.ma91@gmail.com",
    password: "p!GJuNYiG.b6XCA"
  };
  
  console.log(openLawConfig.templateName);
  const apiClient = new APIClient(openLawConfig.server);
  
  class SeriesA extends React.Component {
    //initial state of variables for Assignment Template, and web3,etc
    state = {
      // State variables for OpenLaw
      title: "",
      template: "",
      creatorId: "",
      compiledTemplate: null,
      parameters: {},
      executionResult: null,
      variables: null,
      draftId: "",
  
      // State variables for preview component
      previewHTML: null,
      loading: false,
      success: false
    };
  
    componentDidMount = async () => {
      console.log(openLawConfig.userName);
      //const { web3, accounts, contract } = this.props;
      //create an instance of the API client with url as parameter
      apiClient
        .login(openLawConfig.userName, openLawConfig.password)
        .then(console.log);
  
      //Retrieve your OpenLaw template by name, use async/await
      const template = await apiClient.getTemplate(openLawConfig.templateName);
      console.log(template);
  
      //pull properties off of JSON and make into variables
      const title = template.title;
  
      //Retreive the OpenLaw Template, including MarkDown
      const content = template.content;
      console.log("template..", template);
  
      //Get the most recent version of the OpenLaw API Tutorial Template
      const versions = await apiClient.getTemplateVersions(
        openLawConfig.templateName,
        20,
        1
      );
      console.log("versions..", versions[0], versions.length);
  
      //Get the creatorID from the template.
      const creatorId = versions[0].creatorId;
      console.log("creatorId..", creatorId);
  
      //Get my compiled Template, for use in rendering the HTML in previewTemplate
      const compiledTemplate = await Openlaw.compileTemplate(content);
      if (compiledTemplate.isError) {
        throw "template error" + compiledTemplate.errorMessage;
      }
      console.log("my compiled template..", compiledTemplate);
  
      const parameters = {};
      const { executionResult, errorMessage } = await Openlaw.execute(
        compiledTemplate.compiledTemplate,
        {},
        parameters
      );
  
      console.log("execution result:", executionResult);
  
      // ** This is helpful for logging in development, or throwing exceptions at runtime.
      if (errorMessage) {
        console.error("Openlaw Execution Error:", errorMessage);
      }
  
      const variables = await Openlaw.getExecutedVariables(executionResult, {});
      console.log("variables:", variables);
  
      this.setState({
        title,
        template,
        creatorId,
        compiledTemplate,
        parameters,
        executionResult,
        variables
      });
    };
  
    onChange = (key, value) => {
      const {compiledTemplate} = this.state
      const parameters = key
      ? ({
        ...this.state.parameters,
        [key]: value,
      }) : (
        this.state.parameters
      );
  
      const { executionResult, errorMessage } = Openlaw.execute(
        compiledTemplate.compiledTemplate,
        {},
        parameters
      );
      const variables = Openlaw.getExecutedVariables(executionResult, {});
      this.setState({parameters, variables, executionResult})
      }
    
    setTemplatePreview = async () => {
        const {parameters, compiledTemplate} = this.state
        console.log(parameters);
  
        const executionResult = await Openlaw.execute(
          compiledTemplate.compiledTemplate,
          {},
          parameters
        );
        const agreements = await Openlaw.getAgreements(
          executionResult.executionResult
        );
        const previewHTML = await Openlaw.renderForReview(
          agreements[0].agreement,
          {}
        );
        await this.setState({ previewHTML });
        document.getElementById("preview").scrollIntoView({
          behavior: "smooth"
        });
      } 
    
  
    buildOpenLawParamsObj = async (template, creatorId) => {
      const { parameters, draftId } = this.state
  
      const object = {
        templateId: template.id,
        title: template.title,
        text: template.content,
        creator: creatorId,
        parameters,
        overriddenParagraphs: {},
        agreements: {},
        readonlyEmails: [],
        editEmails: [],
        draftId
      };
      return object;
    };
  
    onSubmit = async () => {
      try {
        //login to api
        this.setState({ loading: true }, async () => {
          apiClient.login(openLawConfig.userName, openLawConfig.password);
          console.log("apiClient logged in");
  
          //add Open Law params to be uploaded
          const uploadParams = await this.buildOpenLawParamsObj(
            this.state.template,
            this.state.creatorId
          );
          console.log("parmeters from user..", uploadParams.parameters);
          console.log("all parameters uploading...", uploadParams);
  
          //uploadDraft, sends a draft contract to "Draft Management", which can be edited.
          const draftId = await apiClient.uploadDraft(uploadParams);
          console.log("draft id..", draftId);
  
          const contractParams = {
            ...uploadParams,
            draftId
          };
          console.log(contractParams);
  
          const contractId = await apiClient.uploadContract(contractParams);
          console.log(contractId);
  
          await apiClient.sendContract([], [], contractId);
  
          await this.setState({ loading: false, success: true, draftId });
          document.getElementById("success").scrollIntoView({
            behavior: "smooth"
          });
        });
      } catch (error) {
        console.log(error);
      }
    };
  
    render() {
      const {
        variables,
        parameters,
        executionResult,
        previewHTML,
        loading,
        success
      } = this.state;
      if (!executionResult) return <Loader active />;
      return (
        <Container text style={{ marginTop: "2em" }}>
          <h1>SERIES A TERM SHEET</h1>
          <OpenLawForm
            apiClient={apiClient}
            executionResult={executionResult}
            parameters={parameters}
            onChangeFunction={this.onChange}
            openLaw={Openlaw}
            variables={variables}
          />
          <div className="button-group">
            <Button onClick={this.setTemplatePreview}>Preview</Button>
            <Button primary loading={loading} onClick={this.onSubmit}>
              Submit
            </Button>
          </div>
  
          <Message
            style={success ? { display: "block" } : { display: "none" }}
            className="success-message"
            positive
            id="success"
          >
            <Message.Header>Submission Successful</Message.Header>
            <p>
              Check your <b>e-mail</b> to sign contract
            </p>
          </Message>
          <AgreementPreview id="preview" previewHTML={previewHTML} />
        </Container>
      );
    }
  }
  
  export default SeriesA;
  