import { createContext, FC, ReactNode, useContext, useState } from "react";
import { useAuthContext } from "./AuthContext";

export const colorMap = {
  pink: "#ea156c",
  orange: "#e28800",
  green: "#46a80a",
  teal: "#05a8b6",
  purple: "#7305d4",
};

interface IUserDetails {
  email: string | undefined;
  firstName: string;
  lastName: string;
}

interface ISettingsContext {
  calendarColor: string;
  userDetails: IUserDetails;
  editUserDetails: (details: Partial<IUserDetails>) => void;
  setCalendarColor: (color: string) => void;
}

const SettingsContext = createContext<ISettingsContext>(undefined!);

export const SettingsContextProvider: FC<{ children: ReactNode }> = ({
  children,
}) => {
  const { user } = useAuthContext();
  const [userDetails, setUserDetails] = useState<IUserDetails>({
    email: user?.email?.toString(),
    firstName: "",
    lastName: "",
  });
  const [calendarColor, setCalendarColor] = useState<string>(colorMap.pink);

  const editUserDetails = (details: Partial<IUserDetails>) => {
    setUserDetails((prevDetails) => ({
      ...prevDetails,
      ...details,
    }));
  };
  return (
    <SettingsContext.Provider
      value={{ calendarColor, setCalendarColor, userDetails, editUserDetails }}
    >
      {children}
    </SettingsContext.Provider>
  );
};

export const useSettingsContext = () => useContext(SettingsContext)!;