import React, {memo} from 'react';
import {StyleSheet} from 'react-native';
import {BlurView} from 'expo-blur';
import Animated, {useAnimatedStyle} from 'react-native-reanimated';
import {useReanimatedKeyboardAnimation} from 'react-native-keyboard-controller';
import {DefaultMessage} from '@modules/chats/components';
import {useMentions, useMessageActionsContext} from '@modules/chats/contexts';
import {SPACING} from '@shared/theme';
import {isAndroid} from '@shared/utils';

const BLUR_BACKGROUND = 'rgba(0,0,0,0.3)';

const EditionBackground = () => {
  const {targetMessage, isEditing} = useMessageActionsContext();
  const {chatFooterHeight} = useMentions();
  const {height} = useReanimatedKeyboardAnimation();
  const isVisible = isEditing && targetMessage;

  const animatedTranslateStyle = useAnimatedStyle(() => {
    if (!_WORKLET) {
      return {
        transform: [{translateY: 0}],
      };
    }

    return {transform: [{translateY: height.value}]};
  });

  return isVisible ? (
    <BlurView
      style={[
        styles.container,
        {paddingBottom: chatFooterHeight + SPACING.x2},
        isAndroid
          ? {
              backgroundColor: BLUR_BACKGROUND,
            }
          : {},
      ]}
      intensity={20}
      experimentalBlurMethod="dimezisBlurView"
      blurReductionFactor={6}>
      <Animated.View
        testID="edit-message-background"
        style={animatedTranslateStyle}>
        <DefaultMessage item={targetMessage} />
      </Animated.View>
    </BlurView>
  ) : null;
};

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
  },
});

export default memo(EditionBackground);
