import React, {ForwardedRef, forwardRef} from 'react';
import {View} from 'react-native';
import {EditorBridge, RichText} from '@10play/tentap-editor';
import ActivityIndicator from '@components/ActivityIndicator';
import {useMentionSuggestion} from '@hooks/useMentionSuggestion';
import {useTheme} from '@shared/theme';

import {styles} from './styles';
import {Suggestions} from './components/Suggestions';

interface Props {
  editor: EditorBridge;
  groupId?: number;
}

function RichTextInput(
  {editor, groupId}: Props,
  richTextRef: ForwardedRef<View>,
) {
  const {theme} = useTheme();
  const {showSuggestions, suggestions, isLoadingSuggestions} =
    useMentionSuggestion(editor, groupId);
  return (
    <View style={styles.container}>
      <View style={styles.richText} ref={richTextRef}>
        <RichText editor={editor} showsVerticalScrollIndicator={false} />
      </View>
      {(showSuggestions || isLoadingSuggestions) && (
        <View
          style={[
            styles.suggestionsContainer,
            {
              backgroundColor: theme.background.elements.default,
              borderColor: theme.border.neutral.default,
            },
          ]}>
          {isLoadingSuggestions ? (
            <ActivityIndicator style={styles.paddingVertical} />
          ) : (
            <Suggestions editor={editor} suggestions={suggestions} />
          )}
        </View>
      )}
    </View>
  );
}

export default forwardRef(RichTextInput);