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

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

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

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

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

  return (
    <Popover
      position="top-end"
      withArrow
      shadow="sm"
      opened={opened}
      onChange={setOpened}
      trapFocus
      closeOnEscape
      closeOnClickOutside
      withinPortal
    >
      <Popover.Target>
        <ActionIcon
          variant="subtle"
          onClick={() => setOpened((o) => !o)}
          disabled={disabled}
          aria-label={t`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={t(label)}
              >
                <Text size="lg" style={{ lineHeight: 1 }}>
                  {emoji}
                </Text>
              </UnstyledButton>
            );
          })}
        </SimpleGrid>
      </Popover.Dropdown>
    </Popover>
  );
};

export default EmojiPicker;