import React from 'react';
import { View, StyleSheet, Animated } from 'react-native';
import { GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';
import { Message, MessageProps } from 'react-native-gifted-chat';
import { isSameDay, isSameUser } from 'react-native-gifted-chat/lib/utils';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Colors } from 'src/theme';
import { trigger } from 'react-native-haptic-feedback';
import { CustomMessage } from '../types';

type ChatMessageBoxProps = {
  setReplyOnSwipeOpen: (message: CustomMessage) => void;
  updateRowRef: (ref: any) => void;
} & MessageProps<CustomMessage>;

const options = {
  enableVibrateFallback: true,
  ignoreAndroidSystemSettings: false
};

const ChatMessageBox = ({ setReplyOnSwipeOpen, updateRowRef, ...props }: ChatMessageBoxProps) => {
  const isNextMyMessage =
    props.currentMessage &&
    props.nextMessage &&
    isSameUser(props.currentMessage, props.nextMessage) &&
    isSameDay(props.currentMessage, props.nextMessage);

  const renderRightAction = (progressAnimatedValue: Animated.AnimatedInterpolation<number>) => {
    const size = progressAnimatedValue.interpolate({
      inputRange: [0, 1, 100],
      outputRange: [0, 1, 1]
    });
    const trans = progressAnimatedValue.interpolate({
      inputRange: [0, 1, 2],
      outputRange: [0, -12, -20]
    });

    return (
      <Animated.View
        style={[
          styles.container,
          { transform: [{ scale: size }, { translateX: trans }] },
          isNextMyMessage ? styles.defaultBottomOffset : styles.bottomOffsetNext,
          props.position === 'right' && styles.leftOffsetValue
        ]}
      >
        <View style={styles.replyImageWrapper}>
          <MaterialCommunityIcons name="reply-circle" size={20} color={Colors.DARK_BLUE} />
        </View>
      </Animated.View>
    );
  };

  const onSwipeOpenAction = () => {
    if (props.currentMessage) {
      setReplyOnSwipeOpen({ ...props.currentMessage });
    }
  };

  if (props.currentMessage?.deleted || props.currentMessage?.system) {
    return <Message {...props} />;
  }

  return (
    <GestureHandlerRootView>
      <Swipeable
        ref={updateRowRef}
        friction={2}
        rightThreshold={40}
        renderRightActions={renderRightAction}
        onSwipeableOpen={onSwipeOpenAction}
        onSwipeableWillOpen={() => trigger('impactMedium', options)}
      >
        <Message {...props} />
      </Swipeable>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    width: 40
  },
  replyImageWrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  replyImage: {
    width: 20,
    height: 20
  },
  defaultBottomOffset: {
    marginBottom: 2
  },
  bottomOffsetNext: {
    marginBottom: 10
  },
  leftOffsetValue: {
    marginLeft: 16
  }
});

export default ChatMessageBox;
