import { Component } from "inferno";
import { getEmojiMart } from "../../utils";


interface EmojiMartProps {
    onEmojiClick?(val: any): any;
    pickerOptions: any;
}

export class EmojiMart extends Component<
    EmojiMartProps
> {
    constructor(props: any, context: any) {
        super(props, context);
        this.handleEmojiClick = this.handleEmojiClick.bind(this);
    }
    componentDidMount() {
        let div: any = document.getElementById("emoji-picker");
        if (div) {
            div.appendChild(getEmojiMart(this.handleEmojiClick, this.props.pickerOptions));
        }
    }

    render() {
        return (
            <div id="emoji-picker"></div>
        );
    }

    handleEmojiClick(e: any) {
        this.props.onEmojiClick?.(e);
    }
}