import React, { createContext, useContext, useEffect, useState } from "react";
const initialState = {
  allTrainDiagram: undefined,
  setAllTrainDiagram: () => {},
};

const AllTrainDiagramContext = createContext(initialState);

export const useAllTrainDiagram = () => {
  return useContext(AllTrainDiagramContext);
};

export const AllTrainDiagramProvider = ({ children }) => {
  const [allTrainDiagram, setAllTrainDiagram] = useState();
  const customData = {
  };
  useEffect(() => {
    fetch(
      "https://script.google.com/macros/s/AKfycbx_s7RB-xTy-iAslFJg7LfplLV09-hjDXEjdi9kCP_JT45wq17Af_IPOKIOqIfaNDg/exec"
    )
      .then((res) => res.json())
      .then((res) => {
        const data = {};
        res.forEach((d) => {
          const keys = Object.keys(d);
          data[keys] = d[keys];
        });
        return data;
      })
      .then((res) => {
        Object.assign(res, customData);
        setAllTrainDiagram(res);
      });
  }, []);

  return (
    <AllTrainDiagramContext.Provider
      value={{ allTrainDiagram, setAllTrainDiagram }}
    >
      {children}
    </AllTrainDiagramContext.Provider>
  );
};