import { View } from 'react-native';
import React, { ComponentType } from 'react';

import { emitter } from './Event';
import { useTheme } from '../ThemeContext';
import * as Events from '../../bindings/Events';

const isEmptyString = (s: string | null): boolean => !s || s.length == 0;
export type Props = {
  readonly name: string;
  readonly render: (_1: string, _2: (_1: string, _2: string) => void) => JSX.Element;
};

const MentionList: ComponentType<Props> = ({ name, render }: Props) => {
  const theme = useTheme();

  const [search, setSearch] = React.useState<string>('');
  const [target, setTarget] = React.useState<string | null>(null);
  const normalizeEventName = (event: string) => `${name}/${event}`;
  React.useEffect(() => {
    const removeMentionSearchListener = Events.on(
      emitter,
      normalizeEventName('mention-search'),
      (data: { search?: string; target?: string }) => {
        const search = data.search || '';
        const target = data.target || null;

        setSearch(search);
        setTarget(target);
      },
    );

    return () => {
      removeMentionSearchListener();
    };
  }, []);

  if (isEmptyString(search)) {
    return null;
  } else {
    return (
      <View style={theme.richTextEditor.suggestionList}>
        {render(search, (id, name) => {
          const data = {
            id: id,
            name: name,
            target: target,
          };

          Events.emit(emitter, normalizeEventName('mention-apply'), data);
        })}
      </View>
    );
  }
};

export default MentionList;