import {React, ReactDOM} from 'nylas-exports';
import EmojiActions from './emoji-actions';
import emoji from 'node-emoji';
import missingEmojiList from './missing-emoji';


class EmojiPicker extends React.Component {
  static displayName = "EmojiPicker";
  static propTypes = {
    emojiOptions: React.PropTypes.array,
    selectedEmoji: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidUpdate() {
    const selectedButton = ReactDOM.findDOMNode(this).querySelector(".emoji-option");
    if (selectedButton) {
      selectedButton.scrollIntoViewIfNeeded();
    }
  }

  onMouseDown(emojiName) {
    EmojiActions.selectEmoji({emojiName, replaceSelection: true});
  }

  render() {
    const emojiButtons = [];
    let emojiIndex = this.props.emojiOptions.indexOf(this.props.selectedEmoji);
    if (emojiIndex === -1) emojiIndex = 0;
    if (this.props.emojiOptions) {
      this.props.emojiOptions.forEach((emojiOption, i) => {
        const emojiClass = emojiIndex === i ? "btn btn-icon emoji-option" : "btn btn-icon";
        let emojiChar = emoji.get(emojiOption);
        if (process.platform === "darwin" && missingEmojiList.indexOf(emojiOption) !== -1) {
          emojiChar = (<img
                        src={`images/composer-emoji/missing-emoji/${emojiOption}.png`}
                        width="16"
                        height="16"
                        style={{marginTop: "-4px", marginRight: "3px"}} />);
        }
        emojiButtons.push(
          <button
            key={emojiOption}
            onMouseDown={() => this.onMouseDown(emojiOption)}
            className={emojiClass}>
            {emojiChar} :{emojiOption}:
          </button>
        );
        emojiButtons.push(<br key={emojiOption + " br"} />);
      });
    }
    return (
      <div className="emoji-picker">
        {emojiButtons}
      </div>
    );
  }
}

export default EmojiPicker;