import React, { createContext, useContext, useMemo, useState } from "react";
import {
  TopPostsManagerContextProps,
  TopPostsManagerProviderProps,
  Filters,
} from "@app/models/components";
import { useSettings } from "./SettingsContext";
import { ensureDateRangeObject } from "@app/services/utilities";

const TopPostsManagerContext = createContext<TopPostsManagerContextProps>(
  {} as TopPostsManagerContextProps
);

export const TopPostsManagerProvider: React.FC<
  TopPostsManagerProviderProps
> = ({ children }) => {
  const { dateRangeOptions, initialSettings } = useSettings();
  const [filters, setFilters] = useState<Filters>({
    scope: "",
    language: "",
    date_range:
      ensureDateRangeObject(initialSettings.date_range) ??
      dateRangeOptions[0].range,
  });

  const topPostsManagerContextValue = useMemo(
    () => ({ filters, setFilters }),
    [filters, setFilters]
  );

  return (
    <TopPostsManagerContext.Provider value={topPostsManagerContextValue}>
      {children}
    </TopPostsManagerContext.Provider>
  );
};

export const useTopPostsManager = () => {
  return useContext(TopPostsManagerContext);
};