import * as React from "react";
import { createContext, useContext, useMemo, useState } from "react";
import useSessionStorage from "~/hooks/useSessionStorage";

const StateContext = createContext(null);

export const StateProvider = ({ children }) => {
  const [isSubmitting, setSubmitting] = useState(false);
  const [formData, setFormData] = useState({});
  const [greetingAck, setGreetingAck] = useSessionStorage(
    "hyperglass-greeting-ack",
    false
  );
  const resetForm = layoutRef => {
    layoutRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
    setSubmitting(false);
    setFormData({});
  };
  const value = useMemo(() => ({
    isSubmitting,
    setSubmitting,
    formData,
    setFormData,
    greetingAck,
    setGreetingAck,
    resetForm
  }));
  return (
    <StateContext.Provider value={value}>{children}</StateContext.Provider>
  );
};

export const useHyperglassState = () => useContext(StateContext);