import { cx } from "@karma/cva";
import { LoadingIcon } from "@karma/icon";
import * as SelectPrimitive from "@radix-ui/react-select";
import * as React from "react";
import { SelectScrollDownButton, SelectScrollUpButton } from "./selectRoot";

export type SelectContentProps = React.ComponentPropsWithoutRef<
  typeof SelectPrimitive.Content
> & {
  variant?: "primary" | "accent" | "muted" | "outline";
  showArrows?: boolean;
  scrollBoxRef?: React.RefObject<HTMLDivElement | null>;
  handleScrollBoxScroll?: () => void;
  loading?: boolean;
};

export const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  SelectContentProps
>(
  (
    {
      className,
      children,
      position = "popper",
      variant = "primary",
      showArrows = false,
      scrollBoxRef,
      handleScrollBoxScroll,
      loading = false,
      ...props
    },
    ref,
  ) => (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        ref={ref}
        className={cx(
          "relative z-50 max-h-64 min-w-[180px] max-w-[237px] overflow-hidden rounded-md border bg-[#D9D9D9] py-3 shadow-md sm:min-w-[237px]",
          {
            "rounded-[25px] border-0 bg-background-invert-secondary text-primary":
              variant === "primary",
            "bg-accent text-secondary": variant === "accent",
            "bg-muted text-secondary": variant === "muted",
            "bg-transparent": variant === "outline",
          },
          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
          position === "popper" &&
            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
          className,
        )}
        position={position}
        {...props}
      >
        {showArrows && <SelectScrollUpButton />}
        <SelectPrimitive.Viewport
          className={cx(
            "p-0",
            position === "popper" &&
              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] ",
          )}
        >
          <div
            onScroll={handleScrollBoxScroll && handleScrollBoxScroll}
            ref={scrollBoxRef}
            className="custom-scrollbar-3 max-h-[327px] w-full overflow-auto"
          >
            {children}
            {loading && (
              <div className="my-2 w-full">
                <LoadingIcon className="mx-auto h-5 w-5 animate-spin text-white" />
              </div>
            )}
          </div>
        </SelectPrimitive.Viewport>
        {showArrows && <SelectScrollDownButton />}
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  ),
);
SelectContent.displayName = SelectPrimitive.Content.displayName;