import React, {
  FC,
  MutableRefObject,
  Ref,
  useMemo,
  useRef,
  useState,
  ReactFragment,
} from 'react';
import {
  NativeSyntheticEvent,
  StyleSheet,
  StyleProp,
  Text,
  TextInput,
  TextInputProps,
  TextInputSelectionChangeEventData,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import {useDispatch, useSelector} from 'react-redux';
import {TAGG_LIGHT_BLUE} from '../../constants';
import {
  PatternPartType,
  MentionPartType,
  Suggestion,
} from 'react-native-controlled-mentions/dist/types';
import {
  defaultMentionTextStyle,
  generateValueFromPartsAndChangedText,
  generateValueWithAddedSuggestion,
  getMentionPartSuggestionKeywords,
  isMentionPartType,
  parseValue,
} from 'react-native-controlled-mentions/dist/utils';
import {Avatar} from '../common';
import {normalize} from 'react-native-elements';

import UpArrowIcon from '../../assets/icons/up_arrow.svg';
import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils';

type PartType = MentionPartType | PatternPartType;

type MentionInputControlledProps = Omit<TextInputProps, 'onChange'> & {
  value: string;
  onChange: (value: string) => any;

  partTypes?: PartType[];

  inputRef?: Ref<TextInput>;

  containerStyle?: StyleProp<ViewStyle>;

  addComment?: () => any | null;

  NewText?: FC<any>;
};

const MentionInputControlled: FC<MentionInputControlledProps> = ({
  value,
  onChange,

  partTypes = [],

  inputRef: propInputRef,

  containerStyle,

  onSelectionChange,

  addComment,

  NewText,

  ...textInputProps
}) => {
  const textInput = useRef<TextInput | null>(null);

  const [selection, setSelection] = useState({start: 0, end: 0});

  const [keyboardText, setKeyboardText] = useState<string>('');

  const validRegex = () => {
    if (partTypes.length === 0) {
      return /.*@[^ ]*$/;
    } else {
      return new RegExp(`.*@${keywordByTrigger[partTypes[0].trigger]}.*$`);
    }
  };

  const {plainText, parts} = useMemo(
    () => parseValue(value, partTypes),
    [value, partTypes],
  );

  const handleSelectionChange = (
    event: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
  ) => {
    setSelection(event.nativeEvent.selection);

    onSelectionChange && onSelectionChange(event);
  };

  /**
   * Callback that trigger on TextInput text change
   *
   * @param changedText
   */
  const onChangeInput = (changedText: string) => {
    setKeyboardText(changedText);
    onChange(
      generateValueFromPartsAndChangedText(parts, plainText, changedText),
    );
  };

  /**
   * We memoize the keyword to know should we show mention suggestions or not
   */
  const keywordByTrigger = useMemo(() => {
    return getMentionPartSuggestionKeywords(
      parts,
      plainText,
      selection,
      partTypes,
    );
  }, [parts, plainText, selection, partTypes]);

  /**
   * Callback on mention suggestion press. We should:
   * - Get updated value
   * - Trigger onChange callback with new value
   */
  const onSuggestionPress =
    (mentionType: MentionPartType) => (suggestion: Suggestion) => {
      const newValue = generateValueWithAddedSuggestion(
        parts,
        mentionType,
        plainText,
        selection,
        suggestion,
      );

      if (!newValue) {
        return;
      }

      onChange(newValue);

      /**
       * Move cursor to the end of just added mention starting from trigger string and including:
       * - Length of trigger string
       * - Length of mention name
       * - Length of space after mention (1)
       *
       * Not working now due to the RN bug
       */
      // const newCursorPosition = currentPart.position.start + triggerPartIndex + trigger.length +
      // suggestion.name.length + 1;

      // textInput.current?.setNativeProps({selection: {start: newCursorPosition, end: newCursorPosition}});
    };

  const handleTextInputRef = (ref: TextInput) => {
    textInput.current = ref as TextInput;

    if (propInputRef) {
      if (typeof propInputRef === 'function') {
        propInputRef(ref);
      } else {
        (propInputRef as MutableRefObject<TextInput>).current =
          ref as TextInput;
      }
    }
  };

  const renderMentionSuggestions = (mentionType: MentionPartType) => (
    <React.Fragment key={mentionType.trigger}>
      {mentionType.renderSuggestions &&
        mentionType.renderSuggestions({
          keyword: keywordByTrigger[mentionType.trigger],
          onSuggestionPress: onSuggestionPress(mentionType),
        })}
    </React.Fragment>
  );

  const validateInput = (testString: string) => {
    return validRegex().test(testString);
  };

  return NewText ? (
    <NewText
      {...textInputProps}
      containerStyle={containerStyle}
      validateInput={validateInput}
      keyboardText={keyboardText}
      partTypes={partTypes}
      renderMentionSuggestions={renderMentionSuggestions}
      handleTextInputRef={handleTextInputRef}
      onChangeInput={onChangeInput}
      handleSelectionChange={handleSelectionChange}
      parts={parts}
      addComment={addComment}
    />
  ) : (
    <View style={containerStyle}>
      {validateInput(keyboardText)
        ? (
            partTypes.filter(
              (one) =>
                isMentionPartType(one) &&
                one.renderSuggestions != null &&
                !one.isBottomMentionSuggestionsRender,
            ) as MentionPartType[]
          ).map(renderMentionSuggestions)
        : null}

      <TextInput
        multiline
        {...textInputProps}
        ref={handleTextInputRef}
        onChangeText={onChangeInput}
        onSelectionChange={handleSelectionChange}>
        <Text>
          {parts.map(({text, partType, data}, index) =>
            partType ? (
              <Text
                key={`${index}-${data?.trigger ?? 'pattern'}`}
                style={partType.textStyle ?? defaultMentionTextStyle}>
                {text}
              </Text>
            ) : (
              <Text key={index}>{text}</Text>
            ),
          )}
        </Text>
      </TextInput>

      {validateInput(keyboardText)
        ? (
            partTypes.filter(
              (one) =>
                isMentionPartType(one) &&
                one.renderSuggestions != null &&
                one.isBottomMentionSuggestionsRender,
            ) as MentionPartType[]
          ).map(renderMentionSuggestions)
        : null}
    </View>
  );
};

export default MentionInputControlled;