import { Box, ButtonBase, Typography, useTheme, Modal } from "@mui/material";
import { useState } from "react";
import { EmojiPicker } from "./EmojiPicker";

interface Props {
  emoji: string;
  onEmojiSelect?: (emoji: string) => void;
}

export const OwnEmojiPicker = ({ emoji = "", onEmojiSelect }: Props) => {
  const theme = useTheme();
  const [isPickerOpen, setIsPickerOpen] = useState(false);

  const handleEmojiSelect = (emojiData: any) => {
    onEmojiSelect?.(emojiData.native);
    setIsPickerOpen(false);
  };

  const handleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    setIsPickerOpen(true);
  };

  const handleClose = (e: React.MouseEvent) => {
    e.stopPropagation();
    setIsPickerOpen(false);
  };

  return (
    <>
      <ButtonBase
        onClick={handleClick}
        sx={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          "&:hover": {
            bgcolor: theme.palette.grey[100],
          },
        }}
      >
        <Typography fontSize="100px">{emoji}</Typography>
      </ButtonBase>

      <Modal
        open={isPickerOpen}
        onClose={handleClose}
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
        keepMounted
      >
        <Box
          onClick={(e) => e.stopPropagation()}
          sx={{
            bgcolor: "background.paper",
            borderRadius: 2,
            p: 2,
            boxShadow: 24,
          }}
        >
          <EmojiPicker onEmojiSelect={handleEmojiSelect} />
        </Box>
      </Modal>
    </>
  );
};