const fieldStyles = {
  input: {
    color: "#000645",
    "font-family": "system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
    "letter-spacing": "0.02em"
  },
  ".invalid": {
    color: "#cc0001"
  },
  "::placeholder": {
    color: "#757575"
  },
  ".invalid .card-icon": {
    color: "#cc0001"
  }
};

function HostedFieldsForm({ onSuccess }) {
  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const [error, setError] = React.useState("");
  const [fieldErrors, setFieldErrors] = React.useState({});

  React.useEffect(() => {
    // Initialise hosted fields
    const hostedFields = assembly.hostedFields({ environment: "pre-live" });
    const cardName = hostedFields.create("cardName", {
      placeholder: "Full Name",
      styles: fieldStyles
    });
    const cardNumber = hostedFields.create("cardNumber", {
      placeholder: "•••• •••• •••• ••••",
      styles: fieldStyles
    });
    const cardExpiry = hostedFields.create("cardExpiry", {
      placeholder: "MM/YY",
      styles: fieldStyles
    });
    const cardCvv = hostedFields.create("cardCvv", {
      placeholder: "•••",
      styles: fieldStyles
    });
    cardName.mount("#card-name-field");
    cardNumber.mount("#card-number-field");
    cardExpiry.mount("#card-expiry-field");
    cardCvv.mount("#card-cvv-field");

    const inputs = [cardName, cardNumber, cardExpiry, cardCvv];

    inputs.forEach(function (field) {
      field.on("change", (event) => {
        setFieldErrors((prevState) => ({
          ...prevState,
          [event.fieldType]: event.error ? event.error.message : undefined
        }));
      });
    });

    const form = document.querySelector("form");

    form.addEventListener("submit", (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      setError(false);

      hostedFields
        .createCardAccount({
          token: "YOUR_AUTH_TOKEN",
          user_id: "USER_ID"
        })
        .then(function (response) {
          // handle create card account succeeded
          setIsSubmitting(false);
          onSuccess();
        })
        .catch(function (response) {
          // handle errors
          setIsSubmitting(false);
          if (response.errors && response.errors.token) {
            setError("Your token is not authorized");
          } else {
            setError("There was an error creating your card account.");
          }
        });
    });

    return function cleanup() {
      hostedFields.destroy();
    };
  }, []);

  return (
    <form>
      <div className="cardName-container field-container">
        <label htmlFor="card-name-field">Cardholder Name</label>
        <div id="card-name-field" className="hosted-field"></div>
        {fieldErrors.cardName && (
          <div className="error">{fieldErrors.cardName}</div>
        )}
      </div>
      <div className="cardNumber-container field-container">
        <label htmlFor="card-number-field">Card Number</label>
        <div id="card-number-field" className="hosted-field"></div>
        {fieldErrors.cardNumber && (
          <div className="error">{fieldErrors.cardNumber}</div>
        )}
      </div>
      <div className="field-columns">
        <div className="cardExpiry-container field-container">
          <label htmlFor="card-expiry-field">Expiry Date</label>
          <div id="card-expiry-field" className="hosted-field"></div>
          {fieldErrors.cardExpiry && (
            <div className="error">{fieldErrors.cardExpiry}</div>
          )}
        </div>
        <div className="cardCvv-container field-container">
          <label htmlFor="card-cvv-field">CVV</label>
          <div id="card-cvv-field" className="hosted-field"></div>
          {fieldErrors.cardCvv && (
            <div className="error">{fieldErrors.cardCvv}</div>
          )}
        </div>
      </div>
      <button
        className={isSubmitting ? "button-loading" : ""}
        disabled={isSubmitting}
      >
        Submit
      </button>
      {error && <div className="response response-error">{error}</div>}
      <div className="disclaimer">
        Payment securely processed by Assembly Payments.
      </div>
    </form>
  );
}

function App() {
  const [showSuccessView, setShowSuccessView] = React.useState(false);

  return (
    <div className="App">
      <div className="wrapper">
        <h2 className="heading">React integration example</h2>
        {showSuccessView ? (
          <div>
            <div className="response response-success">
              Card account successfully created.
            </div>
            <button onClick={() => setShowSuccessView(false)}>
              Create another card account
            </button>
          </div>
        ) : (
          <HostedFieldsForm onSuccess={() => setShowSuccessView(true)} />
        )}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));