import React, { createContext, useContext, useState, ReactNode } from "react";
import CustomSnackbar from "../components/common/CustomSnackbar";
import CheckIcon from "@/assets/icons/check_circle.svg";
import CrossIcon from "@/assets/icons/cancel.svg";

interface SnackbarContextProps {
  showSnackbar: (message: string, type: "success" | "error" | "info") => void;
}

const SnackbarContext = createContext<SnackbarContextProps | undefined>(
  undefined
);

export const useSnackbar = () => {
  const context = useContext(SnackbarContext);
  if (!context) {
    throw new Error("useSnackbar must be used within a SnackbarProvider");
  }
  return context;
};

interface SnackbarProviderProps {
  children: ReactNode;
}

export const SnackbarProvider: React.FC<SnackbarProviderProps> = ({
  children,
}) => {
  const [snackbar, setSnackbar] = useState({
    message: "",
    bgColor: "",
    textColor: "",
    duration: 2,
    visible: false,
    icon: <></>,
    borderColor: "",
  });

  const showSnackbar = (
    message: string,
    type: "success" | "error" | "info"
  ) => {
    let bgColor = "";
    let textColor = "";
    let borderColor = "";
    let icon = <></>;

    console.log(type);

    if (type === "success") {
      bgColor = "#DFF2E9";
      textColor = "#242C3B";
      borderColor = "#B6ECDD";
      icon = <CheckIcon width={20} height={20} fill="#242C3B" />;
    } else if (type === "error") {
      bgColor = "#FDEDED";
      textColor = "#D51D10";
      borderColor = "#F5C6CB";
      icon = <CrossIcon width={20} height={20} fill="#D51D10" />;
    } else if (type === "info") {
      bgColor = "#ffffff";
      textColor = "#055160"; // dark blue text
      borderColor = "#B6E0FE"; // optional subtle border
      // icon = <InfoIcon width={20} height={20} fill="#055160" />;
    }

    setSnackbar({
      message,
      bgColor,
      textColor,
      borderColor,
      icon,
      duration: 2,
      visible: true,
    });
  };

  const hideSnackbar = () => {
    setSnackbar((prevSnackbar) => ({
      ...prevSnackbar,
      visible: false,
    }));
  };

  return (
    <SnackbarContext.Provider value={{ showSnackbar }}>
      {children}
      <CustomSnackbar
        message={snackbar.message}
        bgColor={snackbar.bgColor}
        textColor={snackbar.textColor}
        borderColor={snackbar.borderColor}
        icon={snackbar.icon}
        duration={snackbar.duration}
        visible={snackbar.visible}
        onDismiss={hideSnackbar}
      />
    </SnackbarContext.Provider>
  );
};
export default SnackbarProvider;