import React, {
  createContext,
  useContext,
  useState,
  useEffect,
  useLayoutEffect,
  FC,
} from "react";
import { AS } from "../storageControl";
import { useStationList } from "./useStationList";
const initialState = {
  favoriteStation: [],
  setFavoriteStation: () => {},
  lodAddMigration: () => {},
};

type initialStateType = {
  favoriteStation: any[];
  setFavoriteStation: (d:any)=>void;
  lodAddMigration: ()=>void;
};
const FavoriteStationContext = createContext<initialStateType>(initialState);

export const useFavoriteStation = () => {
  return useContext(FavoriteStationContext);
};
type Props = {
  children: React.ReactNode;
};
export const FavoriteStationProvider:FC<Props> = ({ children }) => {
  const [favoriteStation, setFavoriteStation] = useState([]);
  const { getStationData } = useStationList();
  const lodAddMigration = () => {
    const migration = favoriteStation.map((d) => {
      return getStationData(d[0].Station_JP);
    });
    setFavoriteStation(migration);
  };
  useEffect(() => {
    AS.getItem("favoriteStation")
      .then((d) => {
        const returnData = JSON.parse(d);
        setFavoriteStation(returnData);
      })
      .catch((d) => console.log(d));
  }, []);
  return (
    <FavoriteStationContext.Provider
      value={{ favoriteStation, setFavoriteStation, lodAddMigration }}
    >
      {children}
    </FavoriteStationContext.Provider>
  );
};