import { SmilePlusIcon } from "lucide-react";
import { observer } from "mobx-react-lite";
import { useCallback, useState } from "react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";
import { instanceStore } from "@/store";
import { useReactionActions } from "./hooks";
import type { ReactionSelectorProps } from "./types";

/**
 * ReactionSelector component provides a popover for selecting emoji reactions
 */
const ReactionSelector = observer((props: ReactionSelectorProps) => {
  const { memo, className, onOpenChange } = props;
  const [open, setOpen] = useState(false);

  const handleOpenChange = useCallback(
    (newOpen: boolean) => {
      setOpen(newOpen);
      onOpenChange?.(newOpen);
    },
    [onOpenChange],
  );

  const { hasReacted, handleReactionClick } = useReactionActions({
    memo,
    onComplete: () => handleOpenChange(false),
  });
  const instanceMemoRelatedSetting = instanceStore.state.memoRelatedSetting;

  return (
    <Popover open={open} onOpenChange={handleOpenChange}>
      <PopoverTrigger asChild>
        <span
          className={cn(
            "h-7 w-7 flex justify-center items-center rounded-full border cursor-pointer transition-all hover:opacity-80",
            className,
          )}
        >
          <SmilePlusIcon className="w-4 h-4 mx-auto text-muted-foreground" />
        </span>
      </PopoverTrigger>
      <PopoverContent align="center" className="max-w-[90vw] sm:max-w-md">
        <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-1 max-h-64 overflow-y-auto">
          {instanceMemoRelatedSetting.reactions.map((reactionType) => (
            <button
              type="button"
              key={reactionType}
              className={cn(
                "inline-flex w-auto text-base cursor-pointer rounded px-1 text-muted-foreground hover:opacity-80 transition-colors",
                hasReacted(reactionType) && "bg-secondary text-secondary-foreground",
              )}
              onClick={() => handleReactionClick(reactionType)}
            >
              {reactionType}
            </button>
          ))}
        </div>
      </PopoverContent>
    </Popover>
  );
});

export default ReactionSelector;
