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 {
  Part,
  PartType,
  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 CommentTextFieldProps = {
  containerStyle: StyleProp<ViewStyle>;
  validateInput: any;
  keyboardText: string;
  partTypes: PartType[];
  renderMentionSuggestions: (mentionType: MentionPartType) => ReactFragment;
  handleTextInputRef: (ref: TextInput) => null;
  onChangeInput: (changedText: string) => null;
  handleSelectionChange: (
    event: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
  ) => null;
  parts: Part[];
  addComment: () => any;
};

const CommentTextField: FC<CommentTextFieldProps> = ({
  containerStyle,
  validateInput,
  keyboardText,
  partTypes,
  renderMentionSuggestions,
  handleTextInputRef,
  onChangeInput,
  handleSelectionChange,
  parts,
  addComment,
  ...textInputProps
}) => {
  const {avatar} = useSelector((state: RootState) => state.user);

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

      <View style={styles.containerStyle}>
        <Avatar style={styles.avatar} uri={avatar} />
        <TextInput
          multiline
          {...textInputProps}
          ref={handleTextInputRef}
          onChangeText={onChangeInput}
          onSelectionChange={handleSelectionChange}
          style={styles.text}>
          <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>
        <View style={styles.submitButton}>
          <TouchableOpacity style={styles.submitButton} onPress={addComment}>
            <UpArrowIcon width={35} height={35} color={'white'} />
          </TouchableOpacity>
        </View>
      </View>

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

const styles = StyleSheet.create({
  avatar: {
    height: 35,
    width: 35,
    borderRadius: 30,
    marginRight: 10,
    marginLeft: '3%',
    marginVertical: '2%',
  },
  containerStyle: {
    flexDirection: 'row',
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    height: normalize(40),
  },
  submitButton: {
    height: 35,
    width: 35,
    backgroundColor: TAGG_LIGHT_BLUE,
    borderRadius: 999,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: '3%',
    marginVertical: '2%',
    alignSelf: 'flex-end',
  },
  text: {flex: 1},
});

export {CommentTextField};