import Menu from '@design-system/Menu';
import { Stack, useTheme } from '@mui/material';
import Picker, { EmojiStyle, Theme } from 'emoji-picker-react';

import { type EmojiMenuProps } from './types';

const EmojiMenu = ({ anchorRef, open, onClose, onSelect }: EmojiMenuProps) => {
  const theme = useTheme();
  const isDark = theme.palette.mode === 'dark';

  return (
    <Menu
      open={open}
      anchorEl={anchorRef.current}
      onClose={onClose}
      fixedDimensions={false}
      position="left"
      sx={{
        '& .MuiList-root': {
          p: 0,
        },
      }}
    >
      <Stack sx={{ '& .EmojiPickerReact .epr-category-nav': { py: 1 } }}>
        <Stack
          sx={{
            '& .EmojiPickerReact': {
              '& .epr-category-nav': {
                py: '2px',
              },
              '--epr-emoji-size': '25px',
            },
          }}
        >
          <Picker
            theme={isDark ? Theme.DARK : Theme.LIGHT}
            skinTonesDisabled
            previewConfig={{ showPreview: false }}
            emojiStyle={EmojiStyle.NATIVE}
            onEmojiClick={onSelect}
            width={376}
            height={360}
          />
        </Stack>
      </Stack>
    </Menu>
  );
};

export default EmojiMenu;