/* @flow strict-local */
import React, { PureComponent } from 'react';
import { StyleSheet, Image } from 'react-native';
import { createIconSet } from 'react-native-vector-icons';

import type { ImageEmojiType, Dispatch } from '../types';
import { connect } from '../react-redux';
import { nameToEmojiMap } from './data';
import { getAllImageEmojiByName } from './emojiSelectors';

/* $FlowFixMe: `nameToEmojiMap` is mistyped upstream; elements of
  `glyphMap` may be either `number` or `string`. */
const UnicodeEmoji = createIconSet(nameToEmojiMap, 'AppleColorEmoji');

type SelectorProps = {|
  imageEmoji: ImageEmojiType | void,
|};

type Props = $ReadOnly<{|
  name: string,

  dispatch: Dispatch,
  ...SelectorProps,
|}>;

// TODO: this only handles Unicode emoji (shipped with the app)
// and realm emoji, but not Zulip extra emoji.  See our issue #2846.
class Emoji extends PureComponent<Props> {
  styles = StyleSheet.create({
    image: { width: 20, height: 20 },
  });

  render() {
    const { name, imageEmoji } = this.props;
    if (imageEmoji) {
      return <Image style={this.styles.image} source={{ uri: imageEmoji.source_url }} />;
    }
    return <UnicodeEmoji name={name} size={20} />;
  }
}

export default connect<SelectorProps, _, _>((state, props) => ({
  imageEmoji: getAllImageEmojiByName(state)[props.name],
}))(Emoji);

/* @flow strict-local */
import React, { PureComponent } from 'react';
import { StyleSheet, Image } from 'react-native';
import { createIconSet } from 'react-native-vector-icons';

import type { ImageEmojiType, Dispatch } from '../types';
import { connect } from '../react-redux';
import { nameToEmojiMap } from './data';
import { getAllImageEmojiByName } from './emojiSelectors';

/* $FlowFixMe: `nameToEmojiMap` is mistyped upstream; elements of
  `glyphMap` may be either `number` or `string`. */
const UnicodeEmoji = createIconSet(nameToEmojiMap);

type SelectorProps = {|
  imageEmoji: ImageEmojiType | void,
|};

type Props = $ReadOnly<{|
  name: string,

  dispatch: Dispatch,
  ...SelectorProps,
|}>;

// TODO: this only handles Unicode emoji (shipped with the app)
// and realm emoji, but not Zulip extra emoji.  See our issue #2846.
class Emoji extends PureComponent<Props> {
  styles = StyleSheet.create({
    image: { width: 20, height: 20 },
  });

  render() {
    const { name, imageEmoji } = this.props;
    if (imageEmoji) {
      return <Image style={this.styles.image} source={{ uri: imageEmoji.source_url }} />;
    }
    return <UnicodeEmoji name={name} size={20} />;
  }
}

export default connect<SelectorProps, _, _>((state, props) => ({
  imageEmoji: getAllImageEmojiByName(state)[props.name],
}))(Emoji);

Cut misleading ignored reference to an emoji font.
emoji: Cut misleading ignored reference to an emoji font.

Per the docs of the react-native-vector-icons package, this argument
is supposed to be the name of a font.  But there's no sign of a font
by this name actually appearing in the package, so it's hard to see
what passing it could actually mean -- instead, it just misleads the
reader by suggesting that this font is involved somehow.

And, empirically, the behavior is the same when this argument is
removed.  Tested in the reaction-list screen, in an emulated Pixel 3
running Android 10 and in an emulated iPhone 8 running iOS 13.
