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

const AllTrainDiagramContext = createContext(initialState);

export const useAllTrainDiagram = () => useContext(AllTrainDiagramContext);

export const AllTrainDiagramProvider = ({ children }) => {
  const [allTrainDiagram, setAllTrainDiagram] = useState();
  const [keyList, setKeyList] = useState(); // 第二要素
  useEffect(
    () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
    [allTrainDiagram]
  );
  const customData = {
    "9395D":"RIZIN.50 香川大会臨,提,https://www.jr-shikoku.co.jp/03_news/pdf/20250228_20250330_rizin-50-kagawa.pdf#高松,発,22:10#昭和町,発,22:12#栗林公園北口,発,22:15#栗林,発,22:18#木太町,発,22:22#屋島,発,22:26#古高松南,発,22:38#八栗口,発,22:41#讃岐牟礼,発,22:44#志度,発,22:48#オレンジタウン,発,22:52#造田,発,22:56#神前,発,22:59#讃岐津田,発,23:05#鶴羽,発,23:09#丹生,発,23:14#三本松,着,23:18#",
    "9174M":"RIZIN.50 香川大会臨,提,https://www.jr-shikoku.co.jp/03_news/pdf/20250228_20250330_rizin-50-kagawa.pdf#高松,発,22:00#坂出,発,22:16#児島,発,22:39#茶屋町,発,22:55#早島,発,22:59#妹尾,発,23:03#岡山,着,23:12#",

  };
  useEffect(() => {
    fetch(
      "https://n8n.haruk.in/webhook/CrowdTh%E2%82%AC71m3Ra7!ngLead%E2%82%ACr$"
    )
      .then((res) => res.json())
      .then((res) => res.data)
      .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);
      })
      .catch((d) => {
        alert("allTrainDiagram取得エラー/再取得します");
        alert(d);
        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,keyList }}
    >
      {children}
    </AllTrainDiagramContext.Provider>
  );
};