"use client";

import * as React from "react";

export type DashboardBreadcrumbActionIcon = "plus" | "eye";
export type DashboardBreadcrumbActionStyle = "solid" | "outline";
export type DashboardBreadcrumbActionButtonType = "button" | "submit" | "reset";

export interface DashboardBreadcrumbItem {
  title: string;
  href?: string;
}

export interface DashboardBreadcrumbAction {
  label: string;
  href?: string;
  icon?: DashboardBreadcrumbActionIcon;
  style?: DashboardBreadcrumbActionStyle;
  buttonType?: DashboardBreadcrumbActionButtonType;
  formId?: string;
  onClick?: () => void;
  permission?: string;
}

export interface DashboardBreadcrumbState {
  hidden?: boolean;
  title?: string;
  breadcrumbs?: DashboardBreadcrumbItem[];
  action?: DashboardBreadcrumbAction;
  actions?: DashboardBreadcrumbAction[];
}

interface DashboardBreadcrumbContextValue {
  state: DashboardBreadcrumbState | null;
  setState: (nextState: DashboardBreadcrumbState | null) => void;
  resetState: () => void;
}

const DashboardBreadcrumbContext =
  React.createContext<DashboardBreadcrumbContextValue | null>(null);

export function DashboardBreadcrumbProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [state, setStateValue] = React.useState<DashboardBreadcrumbState | null>(null);

  const setState = React.useCallback((nextState: DashboardBreadcrumbState | null) => {
    setStateValue((previousState) => {
      if (JSON.stringify(previousState) === JSON.stringify(nextState)) {
        return previousState;
      }

      return nextState;
    });
  }, []);

  const resetState = React.useCallback(() => {
    setStateValue(null);
  }, []);

  const value = React.useMemo(
    () => ({
      state,
      setState,
      resetState,
    }),
    [state, setState, resetState]
  );

  return (
    <DashboardBreadcrumbContext.Provider value={value}>
      {children}
    </DashboardBreadcrumbContext.Provider>
  );
}

export function useDashboardBreadcrumbState() {
  const context = React.useContext(DashboardBreadcrumbContext);

  if (!context) {
    throw new Error(
      "useDashboardBreadcrumbState must be used within DashboardBreadcrumbProvider"
    );
  }

  return context;
}

export function DashboardBreadcrumbConfig(props: DashboardBreadcrumbState) {
  const { setState, resetState } = useDashboardBreadcrumbState();

  React.useEffect(() => {
    setState({
      hidden: props.hidden,
      title: props.title,
      breadcrumbs: props.breadcrumbs,
      action: props.action,
      actions: props.actions,
    });

    return () => {
      resetState();
    };
  }, [setState, resetState, props]);

  return null;
}