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

export enum ActivePopover {
  None = "None",
  FancyCard = "FancyCard",
  CustomizableCard = "CustomizableCard",
  Frequency = "Frequency",
  Scope = "Scope",
  Language = "Language",
  Limit = "Limit",
  AddFilter = "AddFilter",
  DateRange = "DateRange",
  SaveAsCopy = "SaveAsCopy",
  DisplayOptions = "DisplayOptions",
}

interface UpgradePopoverContextType {
  activePopover: ActivePopover;
  setActivePopover: (popover: ActivePopover) => void;
}

const UpgradePopoverContext = createContext<UpgradePopoverContextType | null>(
  null
);

export const UpgradePopoverProvider: React.FC<{ children: ReactNode }> = ({
  children,
}) => {
  const [activePopover, setActivePopover] = useState<ActivePopover>(
    ActivePopover.None
  );

  return (
    <UpgradePopoverContext.Provider value={{ activePopover, setActivePopover }}>
      {children}
    </UpgradePopoverContext.Provider>
  );
};

export const useUpgradePopover = () => {
  const context = useContext(UpgradePopoverContext);
  if (!context) {
    throw new Error(
      "useUpgradePopover must be used within an UpgradePopoverProvider"
    );
  }
  return context;
};