import Cookies from "js-cookie";
import React, { FunctionComponent, ReactNode, useState } from "react";
import { Settings } from "./settings";
import { SettingsContext } from "./SettingsContext";

type Props = { children?: ReactNode };

export const SettingsProvider: FunctionComponent<Props> = ({ children }) => {
  const cookieValue = Cookies.get("color");
  const [color, setColor] = useState(cookieValue ?? "body-yellow");

  const defaultSettings: Settings = {
    color,
    language: "en",
    changeColor: (newColor: string) => {
      // eslint-disable-next-line no-console
      console.log(newColor);
      setColor(newColor);
      Cookies.set("color", newColor);
    },
  };

  return <SettingsContext.Provider value={defaultSettings}>{children}</SettingsContext.Provider>;
};
