import {useNavigation} from '@react-navigation/native';
import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
import {
  Image,
  KeyboardAvoidingView,
  Platform,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import Animated, {EasingNode} from 'react-native-reanimated';
import {useDispatch, useSelector, useStore} from 'react-redux';
import {headerBarOptions} from '../../routes';
import {MomentContext} from '../../screens/profile/IndividualMoment';
import {deleteMomentTag, loadMomentTags} from '../../services';
import {loadUserMoments} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
import {
  MomentCommentPreviewType,
  MomentPostType,
  MomentTagType,
  ScreenType,
  UserType,
} from '../../types';
import {
  getLoggedInUserAsProfilePreview,
  getTimePosted,
  HeaderHeight,
  navigateToProfile,
  normalize,
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
} from '../../utils';
import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
import {AddComment} from '../comments';
import CommentsCount from '../comments/CommentsCount';
import {MomentTags} from '../common';
import {MomentMoreInfoDrawer, TaggAvatar} from '../profile';
interface MomentPostProps {
  moment: MomentPostType;
  userXId: string | undefined;
  screenType: ScreenType;
  index: number;
}

const MomentPost: React.FC<MomentPostProps> = ({
  moment,
  userXId,
  screenType,
  index,
}) => {
  const {userId: loggedInUserId, username: loggedInUsername} = useSelector(
    (state: RootState) => state.user.user,
  );

  const {user} = useSelector((state: RootState) =>
    userXId ? state.userX[screenType][userXId] : state.user,
  );
  const [tags, setTags] = useState<MomentTagType[]>([]);
  const [momentTagId, setMomentTagId] = useState<string>('');

  const isOwnProfile = user.username === loggedInUsername;

  /*
   * Load tags on initial render to pass tags data to moment header and content
   */
  useEffect(() => {
    loadMomentTags(moment.moment_id).then((response) => {
      setTags(response ? response : []);
    });
  }, []);

  /*
   * Check if loggedInUser has been tagged in the picture and set the id
   */
  useEffect(() => {
    const getMomentTagId = () => {
      const ownTag: MomentTagType[] = tags.filter(
        (tag) => tag.user.id === loggedInUserId,
      );
      if (ownTag?.length > 0) {
        setMomentTagId(ownTag[0].id);
      } else {
        setMomentTagId('');
      }
    };
    getMomentTagId();
  }, [tags]);

  /*
   * Remove tag and update the current tags
   */
  const removeTag = async () => {
    const success = await deleteMomentTag(momentTagId);
    if (success) {
      const filteredTags = tags.filter((tag) => tag.user.id !== loggedInUserId);
      setTags(filteredTags);
    }
  };

  // const [tags, setTags] = useState<MomentTagType[]>(momentTags);
  const state: RootState = useStore().getState();
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const imageRef = useRef(null);
  const [visible, setVisible] = useState(false);
  const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
    new Animated.Value(0),
  );
  const [commentCount, setCommentCount] = useState<number>(
    moment.comments_count,
  );
  const [commentPreview, setCommentPreview] =
    useState<MomentCommentPreviewType | null>(moment.comment_preview);
  const {keyboardVisible} = useContext(MomentContext);
  const [hideText, setHideText] = useState(false);

  const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
  const [aspectRatio, setAspectRatio] = useState<number>(1);

  const [drawerVisible, setDrawerVisible] = useState(false);

  useEffect(
    () =>
      navigation.setOptions({
        ...headerBarOptions('white', ''),
        headerTitle: () => (
          <View
            style={{
              flex: 1,
              width: SCREEN_WIDTH * 0.6,
              flexDirection: 'row',
              justifyContent: 'flex-end',
              marginVertical: '2%',
            }}>
            <View
              style={{
                width: '80%',
                position: 'absolute',
                left: '10%',
                right: '10%',
                height: normalize(70),
              }}>
              <Text
                style={[
                  {
                    textAlign: 'center',
                    color: 'white',
                    fontSize: normalize(18),
                    fontWeight: '700',
                    lineHeight: normalize(21.48),
                    letterSpacing: normalize(1.3),
                  },
                  {
                    fontSize:
                      moment.moment_category.length > 18
                        ? normalize(14)
                        : normalize(16),
                  },
                ]}>
                {moment.moment_category}
              </Text>
            </View>
          </View>
        ),
      }),
    [moment.moment_id],
  );

  useEffect(() => {
    Image.getSize(
      moment.moment_url,
      (w, h) => {
        const isFS = Math.abs(w / h - 9 / 16) < 0.01;
        setAspectRatio(w / h);
        setIsFullScreen(isFS);
      },
      (err) => console.log(err),
    );
  }, []);

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

  useEffect(() => {
    if (!keyboardVisible && hideText) {
      setHideText(false);
    }
  }, [keyboardVisible, hideText]);

  const tagsIcon = useMemo(() => {
    tags.length > 0 && (
      <Image
        source={require('../../assets/icons/tag_indicate.png')}
        style={styles.tagIcon}
      />
    );
  }, [tags]);

  const MomentPosterPreview = () => (
    <View style={styles.momentPosterContainer}>
      <TouchableOpacity
        onPress={() =>
          navigateToProfile(state, dispatch, navigation, screenType, user)
        }
        style={styles.header}>
        <TaggAvatar
          style={styles.avatar}
          userXId={userXId}
          screenType={screenType}
          editable={false}
        />
        <Text style={styles.headerText}>{user.username}</Text>
      </TouchableOpacity>
    </View>
  );

  const TagsIcon = () => {
    return tags.length > 0 ? (
      <TouchableWithoutFeedback
        onPress={() => {
          setVisible(!visible);
          setFadeValue(new Animated.Value(0));
        }}>
        <Image
          source={require('../../assets/icons/tag_indicate.png')}
          style={styles.tagIcon}
        />
      </TouchableWithoutFeedback>
    ) : (
      <React.Fragment />
    );
  };

  const [verticalOffset, setVerticalOffset] = useState<number>(0);
  return (
    <>
      <StatusBar barStyle={'light-content'} />
      <View
        style={{
          backgroundColor: 'black',
          width: SCREEN_WIDTH,
          height: SCREEN_HEIGHT,
          flexDirection: 'column',
          justifyContent: 'center',
        }}>
        <Image
          source={{uri: moment.moment_url}}
          style={[
            styles.image,
            {
              height: isFullScreen ? SCREEN_HEIGHT : SCREEN_WIDTH / aspectRatio,
            },
          ]}
          resizeMode={'cover'}
          ref={imageRef}
        />
        <View
          style={{
            position: 'absolute',
            width: SCREEN_WIDTH,
            height: SCREEN_HEIGHT,
            flexDirection: 'column',
            justifyContent: 'space-between',
            paddingBottom: '24%',
          }}>
          <View
            style={{
              paddingTop: HeaderHeight,
              alignSelf: 'flex-end',
              paddingRight: '8%',
            }}>
            <MomentMoreInfoDrawer
              isOpen={drawerVisible}
              setIsOpen={setDrawerVisible}
              isOwnProfile={isOwnProfile}
              momentTagId={momentTagId}
              removeTag={removeTag}
              dismissScreenAndUpdate={() => {
                dispatch(loadUserMoments(loggedInUserId));
                navigation.goBack();
              }}
              screenType={screenType}
              moment={moment}
              tags={tags}
            />
          </View>
          {visible && (
            <Animated.View
              style={[
                {
                  opacity: fadeValue,
                  height: isFullScreen
                    ? SCREEN_HEIGHT
                    : SCREEN_WIDTH / aspectRatio,
                  width: SCREEN_WIDTH,
                  marginBottom: '3%',
                },
              ]}>
              <MomentTags
                editing={false}
                tags={tags}
                setTags={() => null}
                imageRef={imageRef}
              />
            </Animated.View>
          )}
          <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
            keyboardVerticalOffset={-20}>
            <View
              style={{
                flexDirection: 'column',
                justifyContent: 'flex-end',
              }}>
              <TagsIcon />
              <View
                style={{
                  position: 'absolute',
                  right: '2%',
                  bottom: SCREEN_HEIGHT * 0.12,
                }}>
                <CommentsCount moment={moment} screenType={screenType} />
              </View>
              <MomentPosterPreview />
              {!hideText && (
                <>
                  {moment.caption !== '' &&
                    renderTextWithMentions({
                      value: moment.caption,
                      styles: styles.captionText,
                      partTypes: mentionPartTypes('white'),
                      onPress: (user: UserType) =>
                        navigateToProfile(
                          state,
                          dispatch,
                          navigation,
                          screenType,
                          user,
                        ),
                    })}
                </>
              )}
              <View>
                <AddComment
                  placeholderText={'Add a comment here!'}
                  momentId={moment.moment_id}
                  callback={(message) => {
                    setCommentPreview({
                      commenter: getLoggedInUserAsProfilePreview(state),
                      comment: message,
                    });
                    setCommentCount(commentCount + 1);
                  }}
                  onFocus={() => {
                    setHideText(true);
                    setVerticalOffset(SCREEN_HEIGHT * 0.05);
                  }}
                  isKeyboardAvoiding={false}
                  theme={'dark'}
                />
                <Text style={styles.text}>
                  {getTimePosted(moment.date_created)}
                </Text>
              </View>
            </View>
          </KeyboardAvoidingView>
        </View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  postHeader: {},
  postContent: {
    paddingBottom: normalize(20),
  },
  image: {
    width: SCREEN_WIDTH,
    marginBottom: '3%',
    zIndex: 0,
    position: 'absolute',
  },
  text: {
    marginHorizontal: '5%',
    color: 'white',
    fontWeight: '500',
    textAlign: 'right',
    marginTop: 5,
  },
  captionText: {
    position: 'relative',
    marginHorizontal: '5%',
    color: '#ffffff',
    fontWeight: '500',
    fontSize: normalize(13),
    lineHeight: normalize(15.51),
    letterSpacing: normalize(0.6),
    marginBottom: normalize(5),
    width: SCREEN_WIDTH * 0.79,
  },
  tagIcon: {
    width: normalize(30),
    height: normalize(30),
    bottom: normalize(20),
    left: '5%',
  },
  avatar: {
    width: 48,
    aspectRatio: 1,
    borderRadius: 100,
    marginLeft: '3%',
  },
  headerText: {
    fontSize: 15,
    fontWeight: 'bold',
    color: 'white',
    paddingHorizontal: '3%',
  },
  header: {
    alignItems: 'center',
    flexDirection: 'row',
    marginBottom: normalize(15),
    alignSelf: 'flex-start',
  },
  momentPosterContainer: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default MomentPost;