import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useRef, useState} from 'react';
import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import Animated, {Easing} from 'react-native-reanimated';
import {useDispatch, useStore} from 'react-redux';
import {getCommentsCount} from '../../services';
import {RootState} from '../../store/rootReducer';
import {MomentTagType, ScreenType, UserType} from '../../types';
import {
  getTimePosted,
  navigateToProfile,
  normalize,
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
} from '../../utils';
import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
import {CommentsCount} from '../comments';
import {MomentTags} from '../common';

interface MomentPostContentProps extends ViewProps {
  screenType: ScreenType;
  momentId: string;
  caption: string;
  pathHash: string;
  dateTime: string;
  momentTags: MomentTagType[];
}
const MomentPostContent: React.FC<MomentPostContentProps> = ({
  screenType,
  momentId,
  caption,
  pathHash,
  dateTime,
  style,
  momentTags,
}) => {
  const state: RootState = useStore().getState();
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const [elapsedTime, setElapsedTime] = useState('');
  const [comments_count, setCommentsCount] = useState('');
  const [tags, setTags] = useState<MomentTagType[]>(momentTags);
  const imageRef = useRef(null);
  const [visible, setVisible] = useState(false);

  const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
    new Animated.Value(0),
  );

  useEffect(() => {
    setTags(momentTags);
  }, [momentTags]);

  useEffect(() => {
    const fetchCommentsCount = async () => {
      const count = await getCommentsCount(momentId, false);
      setCommentsCount(count);
    };
    setElapsedTime(getTimePosted(dateTime));
    fetchCommentsCount();
  }, [dateTime, momentId]);

  useEffect(() => {
    const fade = async () => {
      Animated.timing(fadeValue, {
        toValue: 1,
        duration: 250,
        easing: Easing.linear,
      }).start();
    };
    fade();
  }, [fadeValue]);

  return (
    <View style={[styles.container, style]}>
      <TouchableWithoutFeedback
        onPress={() => {
          setVisible(!visible);
          setFadeValue(new Animated.Value(0));
        }}>
        <Image
          ref={imageRef}
          style={styles.image}
          source={{uri: pathHash}}
          resizeMode={'cover'}
        />
        {tags.length > 0 && (
          <Image
            source={require('../../assets/icons/tag_indicate.png')}
            style={[styles.tagIcon]}
          />
        )}
      </TouchableWithoutFeedback>
      {visible && (
        <Animated.View style={[styles.tapTag, {opacity: fadeValue}]}>
          <MomentTags editing={false} tags={tags} imageRef={imageRef} />
        </Animated.View>
      )}
      <View style={styles.footerContainer}>
        <CommentsCount
          commentsCount={comments_count}
          momentId={momentId}
          screenType={screenType}
        />
        <Text style={styles.text}>{elapsedTime}</Text>
      </View>
      {renderTextWithMentions({
        value: caption,
        styles: styles.captionText,
        partTypes: mentionPartTypes('white'),
        onPress: (user: UserType) =>
          navigateToProfile(state, dispatch, navigation, screenType, user),
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: SCREEN_HEIGHT,
  },
  image: {
    width: SCREEN_WIDTH,
    aspectRatio: 1,
    marginBottom: '3%',
  },
  footerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: '7%',
    marginRight: '5%',
    marginBottom: '2%',
  },
  text: {
    position: 'relative',
    paddingBottom: '1%',
    paddingTop: '1%',
    marginLeft: '7%',
    marginRight: '2%',
    color: '#ffffff',
    fontWeight: 'bold',
  },
  captionText: {
    position: 'relative',
    paddingBottom: '34%',
    paddingTop: '1%',
    marginLeft: '5%',
    marginRight: '5%',
    color: '#ffffff',
    fontWeight: '500',
    fontSize: normalize(13),
    lineHeight: normalize(15.51),
    letterSpacing: normalize(0.6),
  },
  tapTag: {
    position: 'absolute',
  },
  tagIcon: {
    width: normalize(30),
    height: normalize(30),
    position: 'absolute',
    bottom: '7%',
    left: normalize(20),
  },
});
export default MomentPostContent;