"use client";
import * as RadixPopover from "@radix-ui/react-popover";
import { theme } from "tailwind.config";
import { NestedCardThemeProvider } from "../ThemeManager/ThemeProvider";
import { useEffect, useState } from "react";
import { PopoverArrow } from "../Icons/PopoverArrow";
import { PopoverOpenContext } from "./PopoverContext";
import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
export const Popover = (props: {
  trigger: React.ReactNode;
  disabled?: boolean;
  children: React.ReactNode;
  align?: "start" | "end" | "center";
  side?: "top" | "bottom" | "left" | "right";
  sideOffset?: number;
  background?: string;
  border?: string;
  className?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  onOpenAutoFocus?: (e: Event) => void;
  asChild?: boolean;
  arrowFill?: string;
  noArrow?: boolean;
}) => {
  let [open, setOpen] = useState(props.open || props.defaultOpen || false);
  useEffect(() => {
    if (props.open !== undefined) setOpen(props.open);
  }, [props.open]);
  let cardBorderHidden = useCardBorderHidden();
  return (
    <RadixPopover.Root
      defaultOpen={props.defaultOpen}
      open={props.open}
      onOpenChange={(o) => {
        setOpen(o);
        props.onOpenChange?.(o);
      }}
    >
      <PopoverOpenContext value={open}>
        <RadixPopover.Trigger
          className="min-w-0 outline-none! touch-manipulation [-webkit-tap-highlight-color:transparent]"
          disabled={props.disabled}
          asChild={props.asChild}
        >
          {props.trigger}
        </RadixPopover.Trigger>
        <RadixPopover.Portal>
          <NestedCardThemeProvider>
            <RadixPopover.Content
              className={`
              z-20 relative
              text-primary
              flex flex-col
              px-3 py-2
              max-w-(--radix-popover-content-available-width)
              max-h-(--radix-popover-content-available-height)
              border border-border rounded-md shadow-md
              ${props.className}
              ${cardBorderHidden ? "light-container" : "bg-bg-page"}
            `}
              side={props.side}
              align={props.align ? props.align : "center"}
              sideOffset={props.sideOffset ? props.sideOffset : 4}
              collisionPadding={16}
              onOpenAutoFocus={props.onOpenAutoFocus}
              arrowPadding={12}
            >
              {props.children}
              {!props.noArrow && (
                <RadixPopover.Arrow
                  asChild
                  width={16}
                  height={8}
                  viewBox="0 0 16 8"
                  className="z-30"
                >
                  <PopoverArrow
                    arrowFill={
                      props.arrowFill
                        ? props.arrowFill
                        : props.background
                          ? props.background
                          : cardBorderHidden
                            ? "color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 95%)"
                            : theme.colors["bg-page"]
                    }
                    arrowStroke={
                      props.border ? props.border : theme.colors["border"]
                    }
                  />
                </RadixPopover.Arrow>
              )}
            </RadixPopover.Content>
          </NestedCardThemeProvider>
        </RadixPopover.Portal>
      </PopoverOpenContext>
    </RadixPopover.Root>
  );
};
