import { createContext, ReactNode, useContext, useState } from "react";

type MessageContextType = {
  isVisible: boolean;
  message: string;
  showMessage: (message: string) => void;
  hideMessage: () => void;
}

const MessageContext = createContext<MessageContextType>({
  isVisible: false,
  message: "",
  showMessage: () => {},
  hideMessage: () => {}
});

type MessageContextProviderProps = {
  children: ReactNode;
}

export const MessageContextProvider = ({children}: MessageContextProviderProps) => {
  const [isVisible, setIsVisible] = useState<boolean>(false);
  const [message, setMessage] = useState<string>("");
  const showMessage = (message: string) => {
    setIsVisible(true);
    setMessage(message);
    setTimeout(() => {
      setIsVisible(false);
      setMessage("");
    }, 3000);
  };

  const hideMessage = () => {
    setIsVisible(false);
    setMessage("");
  };

  const value = {isVisible, message, showMessage, hideMessage};
  return <MessageContext.Provider value={value}>{children}</MessageContext.Provider>
}

export const useMessage = () => {
  if(MessageContext == undefined){
    throw new Error("useMessage debe se usado dentro de un MessageContextProvider");
  }
  return useContext(MessageContext);
};