import { ActionIcon, Popover, SimpleGrid, UnstyledButton, Text } from "@mantine/core";
import { SmileyStickerIcon } from "@phosphor-icons/react";
import { useState } from "react";

interface EmojiPickerProps {
  onSelect: (emoji: string) => void;
  disabled?: boolean;
  userReactions?: string[];
}

const EMOJIS = [
  { emoji: "🫡", label: "salute" },
  { emoji: "😭", label: "crying" },
  { emoji: "🫦", label: "lip" },
  { emoji: "🏗️", label: "crane" },
  { emoji: "👀", label: "eyes" },
  { emoji: "😱", label: "scream" },
  { emoji: "🥹", label: "owo" },
  { emoji: "🤣", label: "rofl" },
  { emoji: "🤪", label: "crazy" },
  { emoji: "🤓", label: "nerd" },
  { emoji: "🥵", label: "hot" },
  { emoji: "🥶", label: "cold" },
];

const EmojiPicker = ({
  onSelect,
  disabled = false,
  userReactions = []
}: EmojiPickerProps) => {
  const [opened, setOpened] = useState(false);

  const handleEmojiSelect = (emoji: string) => {
    onSelect(emoji);
    setOpened(false);
  };

  return (
    <Popover
      position="bottom"
      withArrow
      shadow="sm"
      opened={opened}
      onChange={setOpened}
      trapFocus
      closeOnEscape
      closeOnClickOutside
    >
      <Popover.Target>
        <ActionIcon
          variant="subtle"
          onClick={() => setOpened((o) => !o)}
          disabled={disabled}
          aria-label="Select emoji"
        >
          <SmileyStickerIcon size={16} />
        </ActionIcon>
      </Popover.Target>

      <Popover.Dropdown p="xs">
        <SimpleGrid cols={6} spacing={4}>
          {EMOJIS.map(({ emoji, label }) => {
            const hasReacted = userReactions.includes(emoji);
            return (
              <UnstyledButton
                key={emoji}
                onClick={() => handleEmojiSelect(emoji)}
                style={{
                  borderRadius: "var(--mantine-radius-sm)",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  minHeight: 36,
                  minWidth: 36,
                  backgroundColor: hasReacted ? 'var(--mantine-primary-color-light)' : undefined,
                  border: hasReacted ? '1px solid var(--mantine-primary-color-filled)' : undefined,
                }}
                styles={{
                  root: {
                    '&:hover': {
                      backgroundColor: hasReacted
                        ? 'var(--mantine-primary-color-light-hover)'
                        : 'var(--mantine-color-gray-1)',
                    },
                    '&:active': {
                      transform: 'scale(0.95)',
                    },
                  },
                }}
                aria-label={label}
              >
                <Text size="lg" style={{ lineHeight: 1 }}>
                  {emoji}
                </Text>
              </UnstyledButton>
            );
          })}
        </SimpleGrid>
      </Popover.Dropdown>
    </Popover>
  );
};

export default EmojiPicker;