import PickerUI, {
  EmojiStyle,
  SkinTonePickerLocation,
} from 'emoji-picker-react';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

export type PickerProps = {
  hideBorder?: boolean;
  [key: string]: any;
};

const Picker: React.FC<PickerProps> = ({ hideBorder, ...props }) => {
  const theme = useTheme();
  const { palette } = theme;
  const isDark = palette.mode === 'dark';

  return (
    <Stack
      sx={{
        ...(hideBorder && {
          '& .EmojiPickerReact': {
            borderColor: 'transparent !important',
          },
        }),
        '& .EmojiPickerReact .epr-category-nav': {
          py: '2px',
        },
      }}
    >
      <PickerUI
        skinTonesDisabled
        skinTonePickerLocation={SkinTonePickerLocation.PREVIEW}
        width="100%"
        previewConfig={{ showPreview: false }}
        emojiStyle={EmojiStyle.NATIVE}
        {...props}
        {...({
          theme: isDark ? 'dark' : 'light',
        } as React.ComponentProps<typeof PickerUI>)}
        style={
          {
            '--epr-emoji-size': '25px',
            '--epr-bg': palette.new.background.layout.tertiary,
            '--epr-bg-color': palette.new.background.layout.tertiary,
            '--epr-dark-bg-color': palette.new.background.layout.tertiary,
            '--epr-search-border-color': palette.new.border.neutral.default,
            '--epr-search-border-color-active':
              palette.new.border.neutral.brand,
            '--epr-search-input-placeholder-color':
              palette.new.text.neutral.lighter,
            '--epr-search-input-text-color': palette.new.text.neutral.default,
          } as React.CSSProperties
        }
      />
    </Stack>
  );
};

export default Picker;