import React, { createContext, useState } from "react";
// types
import { ChartContextData, ChartContextActionPayload, ChartContextReducer } from "../types";
// data
import { allViewsWithData, currentViewDataWithView } from "../data";

export const ChartContext = createContext<ChartContextReducer | undefined>(undefined);

const chartReducer = (
  state: ChartContextData,
  action: ChartContextActionPayload
): ChartContextData => {
  switch (action.type) {
    case "CURRENT_VIEW":
      return { ...state, currentView: action.payload };
    case "CURRENT_VIEW_DATA":
      return { ...state, currentViewData: action.payload };
    case "RENDER_VIEW":
      return { ...state, currentViewData: action.payload };
    case "PARTIAL_UPDATE":
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

const initialView = "month";

export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [state, dispatch] = useState<ChartContextData>({
    currentView: initialView,
    currentViewData: currentViewDataWithView(initialView),
    renderView: [],
    allViews: allViewsWithData,
  });

  const handleDispatch = (action: ChartContextActionPayload): ChartContextData => {
    const newState = chartReducer(state, action);
    dispatch(() => newState);
    return newState;
  };

  return (
    <ChartContext.Provider value={{ ...state, dispatch: handleDispatch }}>
      {children}
    </ChartContext.Provider>
  );
};