import { CONTENT_HEIGHT } from '@design-system/IconSelector/constants';
import { Stack, useTheme } from '@mui/material';
import EmojiPicker, {
  type EmojiClickData,
  EmojiStyle,
  SuggestionMode,
} from 'emoji-picker-react';

type EmojiPickerOptionProps = {
  onEmojiSelect?: (data: EmojiClickData) => void;
  onClose?: () => void;
  /** When false, the menu stays open after selecting an emoji (close manually via click outside or ESC). */
  closeOnEmojiSelect?: boolean;
};

const EmojiPickerOption = ({
  onEmojiSelect,
  onClose,
  closeOnEmojiSelect = true,
}: EmojiPickerOptionProps) => {
  const theme = useTheme();
  const handleEmojiClick = (data: EmojiClickData) => {
    onEmojiSelect?.(data);
    if (closeOnEmojiSelect) {
      onClose?.();
    }
  };
  const isDark = theme.palette.mode === 'dark';

  return (
    <Stack
      sx={{
        '& .EmojiPickerReact': {
          borderColor: 'transparent !important',
        },
        '& .EmojiPickerReact input': {
          paddingLeft: 4.5,
          paddingRight: 1.5,
        },
      }}
    >
      <EmojiPicker
        {...({
          theme: isDark ? 'dark' : 'light',
        } as React.ComponentProps<typeof EmojiPicker>)}
        style={
          {
            '--epr-emoji-size': '25px',
            '--epr-bg': theme.palette.new.background.layout.tertiary,
            '--epr-search-input-bg-color':
              theme.palette.new.background.layout.default,
            '--epr-search-input-bg-color-active':
              theme.palette.new.background.layout.default,
            '--epr-dark-search-input-bg-color':
              theme.palette.new.background.layout.default,
            '--epr-dark-search-input-bg-color-active':
              theme.palette.new.background.layout.default,
            '--epr-search-border-color':
              theme.palette.new.border.neutral.default,
            '--epr-search-border-color-active':
              theme.palette.new.border.neutral.brand,
            '--epr-search-input-placeholder-color':
              theme.palette.new.text.neutral.lighter,
            '--epr-search-input-text-color':
              theme.palette.new.text.neutral.default,
          } as React.CSSProperties
        }
        height={CONTENT_HEIGHT - 16}
        width="auto"
        skinTonesDisabled
        lazyLoadEmojis
        previewConfig={{ showPreview: false }}
        emojiStyle={EmojiStyle.NATIVE}
        suggestedEmojisMode={SuggestionMode.RECENT}
        onEmojiClick={handleEmojiClick}
      />
    </Stack>
  );
};

export default EmojiPickerOption;