"use client";
import { Input as BaseInput } from "@base-ui/react/input";
import { Button as BaseButton } from "@base-ui/react/button";
import { ArrowLeft, DotsThree, MagnifyingGlass, Sun } from "@phosphor-icons/react";
import { m, MotionConfig, useAnimate } from "motion/react";
import React, { useEffect, useRef, useState } from "react";

function useClickOutside<T extends HTMLElement>(
  ref: React.RefObject<T | null>,
  handler: (event: MouseEvent | TouchEvent) => void,
) {
  useEffect(() => {
    const listener = (event: MouseEvent | TouchEvent) => {
      const el = ref.current;
      if (!el || el.contains(event.target as Node)) return;
      handler(event);
    };
    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);
    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [ref, handler]);
}

const transition = {
  type: "spring",
  bounce: 0.1,
  duration: 0.2,
};

function Button({
  children,
  onClick,
  disabled,
  ariaLabel,
}: {
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  ariaLabel?: string;
}) {
  return (
    <BaseButton
      className="relative flex h-9 w-9 shrink-0 scale-100 select-none appearance-none items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50"
      type="button"
      onClick={onClick}
      disabled={disabled}
      aria-label={ariaLabel}
    >
      {children}
    </BaseButton>
  );
}

export default function AmieAction() {
  const [openState, setOpenState] = useState<"search" | "settings" | "closed">(
    "closed",
  );
  const containerRef = useRef<HTMLDivElement>(null);

  const [scope, animate] = useAnimate();

  const shake = () => {
    if (scope.current && openState === "settings") {
      animate(scope.current, { x: [0, 5, -5, 0] }, { duration: 0.2 });
    } else {
      console.warn("Scope reference is not set!");
    }
  };

  useClickOutside(containerRef, () => {
    setOpenState("closed");
  });

  return (
    <MotionConfig transition={transition}>
      <div ref={containerRef}>
        <div className="h-full w-full rounded-xl border">
          <m.div
            animate={{
              scaleX:
                openState === "search"
                  ? 340 / 98
                  : openState === "settings"
                    ? 1
                    : 1,
            }}
            style={{ transformOrigin: "left" }}
            initial={false}
          >
            <div className="overflow-hidden p-2">
              {openState === "closed" && (
                <div className="flex space-x-2">
                  <Button
                    ariaLabel="User profile"
                    onClick={() => setOpenState("settings")}
                  >
                    <Sun className="h-5 w-5" />
                  </Button>
                  <Button
                    onClick={() => setOpenState("search")}
                    ariaLabel="Search notes"
                  >
                    <MagnifyingGlass className="h-5 w-5" />
                  </Button>
                </div>
              )}
              {openState === "search" && (
                <div className="flex space-x-2">
                  <Button
                    onClick={() => setOpenState("closed")}
                    ariaLabel="Back"
                  >
                    <ArrowLeft className="h-5 w-5" />
                  </Button>
                  <div className="relative w-full">
                    <BaseInput
                      className="h-9 w-full rounded-lg bg-transparent p-2 text-foreground placeholder:text-muted-foreground outline-none"
                      autoFocus
                      placeholder="Search notes"
                    />
                  </div>
                </div>
              )}
              {openState === "settings" && (
                <div className="flex space-x-2 items-center">
                  <Button
                    onClick={() => setOpenState("closed")}
                    ariaLabel="Back"
                  >
                    <ArrowLeft className="h-5 w-5" />
                  </Button>
                  {openState === "settings" && (
                    <m.p
                      ref={scope}
                      onClick={shake}
                      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); shake(); } }}
                      transition={{ duration: 0.5, delay: 0.1 }}
                      className="text-sm text-foreground bg-muted rounded-lg p-2 hover:bg-muted/70 cursor-pointer w-full whitespace-pre"
                    >
                      Meeting Zenith Friday at 7
                    </m.p>
                  )}
                  <Button ariaLabel="Edit">
                    <DotsThree className="size-5" />
                  </Button>
                </div>
              )}
            </div>
          </m.div>
        </div>
      </div>
    </MotionConfig>
  );
}
Action Menu
