import { Dispatch, SetStateAction, useMemo, useState } from "react";
import { ModalOptions } from "./interface";
import {
  useClick,
  useDismiss,
  useFloating,
  UseFloatingReturn,
  useInteractions,
  UseInteractionsReturn,
  useRole,
} from "@floating-ui/react";
import { ThemeBaseColor } from "../../types";

export type UseModalReturn = {
  open: boolean;
  setOpen: Dispatch<SetStateAction<boolean>>;
  color?: ThemeBaseColor;
  labelId?: string;
  descriptionId?: string;
  setLabelId: Dispatch<SetStateAction<string | undefined>>;
  setDescriptionId: Dispatch<SetStateAction<string | undefined>>;
} & UseInteractionsReturn &
  UseFloatingReturn;

export function useModal({
  initialOpen = false,
  open: controlledOpen,
  onOpen: setControlledOpen,
  color,
}: ModalOptions = {}): UseModalReturn {
  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
  const [labelId, setLabelId] = useState<string | undefined>();
  const [descriptionId, setDescriptionId] = useState<string | undefined>();

  const isUncontrolled = controlledOpen === null || controlledOpen === undefined;
  const open = isUncontrolled ? uncontrolledOpen : controlledOpen;
  const setOpen = isUncontrolled
    ? setUncontrolledOpen
    : (setControlledOpen as Dispatch<SetStateAction<boolean>>);

  const data = useFloating({
    open,
    onOpenChange: setOpen,
  });

  const { context } = data;

  const click = useClick(context);
  const dismiss = useDismiss(context);
  const role = useRole(context);

  const interactions = useInteractions([click, dismiss, role]);

  return useMemo(
    () => ({
      open,
      setOpen,
      ...interactions,
      ...data,
      color,
      labelId,
      descriptionId,
      setLabelId,
      setDescriptionId,
    }),
    [open, setOpen, interactions, data, color, labelId, descriptionId],
  );
}