import React, {
  createContext,
  useContext,
  useState,
  useEffect,
  FC,
} from "react";

import { ASCore } from "../storageControl";

import { getStationList2 } from "../lib/getStationList";
import { injectJavascriptData } from "../lib/webViewInjectjavascript";

import { useNotification } from "../stateBox/useNotifications";

const initialState = {
  selectedLine: undefined,
  setSelectedLine: (e) => {},
  mapsStationData: undefined,
  setMapsStationData: (e) => {},
  iconSetting: undefined,
  setIconSetting: (e) => {},
  mapSwitch: undefined,
  setMapSwitch: (e) => {},
  stationMenu: undefined,
  setStationMenu: (e) => {},
  uiSetting: undefined,
  setUiSetting: (e) => {},
  LoadError: false,
  setLoadError: (e) => {},
  trainInfo: {
    trainNum: undefined,
    limited: undefined,
    trainData: undefined,
  },
  setTrainInfo: (e) => {},
  trainMenu: "true",
  setTrainMenu: (e) => {},
  updatePermission: false,
  setUpdatePermission: (e) => {},
  injectJavascript: "",
};

const TrainMenuContext = createContext(initialState);

export const useTrainMenu = () => {
  return useContext(TrainMenuContext);
};
type props = { children: React.ReactNode };
export const TrainMenuProvider: FC<props> = ({ children }) => {
  const { expoPushToken } = useNotification();
  const [selectedLine, setSelectedLine] = useState(undefined);
  const [mapsStationData, setMapsStationData] = useState(undefined);
  useEffect(() => {
    getStationList2().then(setMapsStationData);
  }, []);
  type boolType = "true" | "false" | undefined;
  //画面表示関連
  const [iconSetting, setIconSetting] = useState<boolType>(undefined);
  const [mapSwitch, setMapSwitch] = useState<boolType>(undefined);
  const [stationMenu, setStationMenu] = useState<boolType>(undefined);
  const [LoadError, setLoadError] = useState(false);

  //更新権限所有確認
  const [updatePermission, setUpdatePermission] = useState(false);
  useEffect(() => {
    fetch(
      "https://n8n.haruk.in/webhook/data-edit-permission?token=" + expoPushToken
    )
      .then((res) => res.json())
      .then((res) => {
        if (res.data == true) {
          setUpdatePermission(true);
        } else {
          setUpdatePermission(false);
        }
      });
  }, [expoPushToken]);

  //列車情報表示関連
  const [trainInfo, setTrainInfo] = useState({
    trainNum: undefined,
    limited: undefined,
    trainData: undefined,
  });

  //駅情報画面用
  const [trainMenu, setTrainMenu] = useState("true");

  //GUIデザインベース
  const [uiSetting, setUiSetting] = useState("tokyo");

  //地図表示テキスト
  const injectJavascript = injectJavascriptData(
    mapSwitch,
    iconSetting,
    stationMenu,
    trainMenu,
    uiSetting
  );

  useEffect(() => {
    //列車アイコンスイッチ
    ASCore({ k: "iconSwitch", s: setIconSetting, d: "true", u: true });
    //地図スイッチ
    ASCore({ k: "mapSwitch", s: setMapSwitch, d: "true", u: true });
    //駅メニュースイッチ
    ASCore({ k: "stationSwitch", s: setStationMenu, d: "true", u: true });
    //列車メニュースイッチ
    ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true", u: true });
    //GUIデザインベーススイッチ
    ASCore({ k: "uiSetting", s: setUiSetting, d: "tokyo", u: true });
  }, []);

  return (
    <TrainMenuContext.Provider
      value={{
        selectedLine,
        setSelectedLine,
        mapsStationData,
        setMapsStationData,
        iconSetting,
        setIconSetting,
        mapSwitch,
        setMapSwitch,
        stationMenu,
        setStationMenu,
        uiSetting,
        setUiSetting,
        LoadError,
        setLoadError,
        trainInfo,
        setTrainInfo,
        trainMenu,
        setTrainMenu,
        updatePermission,
        setUpdatePermission,
        injectJavascript,
      }}
    >
      {children}
    </TrainMenuContext.Provider>
  );
};