import { type } from "os";
import { createContext, useState, ReactNode } from "react";

type FormValues = {
  month: string;
  year: string;
};
type userloginData = {
  username: string;
  email: string;
  password: string;
};

type MyContextType = {
  myState: string;
  isAdmin: boolean;
  setMyState: React.Dispatch<React.SetStateAction<string>>;
  setIsAdmin: React.Dispatch<React.SetStateAction<boolean>>;
  userInfo: userloginData;
  setUserInfo: React.Dispatch<React.SetStateAction<userloginData>>;
  formValues: FormValues;
  setFormValues: React.Dispatch<React.SetStateAction<FormValues>>;
};

const initialContextValue: MyContextType = {
  myState: "",
  userInfo: {
    username: "",
    email: "",
    password: "",
  },
  setUserInfo: () => {},
  setMyState: () => {},
  formValues: {
    month: "6",
    year: "2023",
  },
  setFormValues: () => {},
  isAdmin: false,
  setIsAdmin: () => {},
};

export const MyContext = createContext<MyContextType>(initialContextValue);

type MyContextProviderProps = {
  children: ReactNode;
};

export const MyContextProvider: React.FC<MyContextProviderProps> = ({
  children,
}) => {
  const [myState, setMyState] = useState("");
  const [isAdmin, setIsAdmin] = useState(false);
  const [userInfo, setUserInfo] = useState<userloginData>({
    username: "",
    email: "",
    password: "",
  });
  const [formValues, setFormValues] = useState<FormValues>({
    month: "",
    year: "2023",
  });

  return (
    <MyContext.Provider
      value={{
        myState,
        setMyState,
        userInfo,
        setUserInfo,
        formValues,
        setFormValues,
        isAdmin,
        setIsAdmin,
      }}
    >
      {children}
    </MyContext.Provider>
  );
};

// import { createContext, useState, ReactNode } from 'react';

// type MyContextType = {
//   myState: string;
//   setMyState: React.Dispatch<React.SetStateAction<string>>;
// };

// const initialContextValue: MyContextType = {
//   myState: '',
//   setMyState: () => {},
// };

// export const MyContext = createContext<MyContextType>(initialContextValue);

// type MyContextProviderProps = {
//   children: ReactNode;
// };

// export const MyContextProvider: React.FC<MyContextProviderProps> = ({
//   children,
// }) => {
//   const [myState, setMyState] = useState('');

//   return (
//     <MyContext.Provider value={{ myState, setMyState }}>
//       {children}
//     </MyContext.Provider>
//   );
// };