import React, {useEffect, useState} from 'react';
import {StyleSheet, View} from 'react-native';
import {useSelector} from 'react-redux';
import {MomentPostContent, MomentPostHeader} from '.';
import {deleteMomentTag, loadMomentTags} from '../../services';
import {RootState} from '../../store/rootReducer';
import {MomentTagType, MomentType, ScreenType} from '../../types';
import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';

interface MomentPostProps {
  item: MomentType;
  userXId: string | undefined;
  screenType: ScreenType;
}

const ITEM_HEIGHT = SCREEN_HEIGHT * 0.9;

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

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

  const isOwnProfile = username === loggedInUsername;

  const loadTags = async () => {
    const response = await loadMomentTags(item.moment_id);
    setTags(response ? response : []);
  };

  /*
   * Load tags on initial render to pass tags data to moment header and content
   */
  useEffect(() => {
    loadTags();
  }, []);

  /*
   * 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);
    }
  };

  return (
    <View style={styles.postContainer}>
      <MomentPostHeader
        userXId={userXId}
        screenType={screenType}
        username={isOwnProfile ? loggedInUsername : username}
        momentId={item.moment_id}
        style={styles.postHeader}
        momentTagId={momentTagId}
        removeTag={removeTag}
      />
      <MomentPostContent
        style={styles.postContent}
        momentId={item.moment_id}
        caption={item.caption}
        pathHash={item.moment_url}
        dateTime={item.date_created}
        screenType={screenType}
        momentTags={tags}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  contentContainer: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    paddingTop: StatusBarHeight,
    flex: 1,
    paddingBottom: 0,
  },
  content: {
    flex: 9,
  },
  header: {
    flex: 1,
  },
  postContainer: {
    height: ITEM_HEIGHT,
    width: SCREEN_WIDTH,
    flex: 1,
  },
  postHeader: {
    flex: 1,
  },
  postContent: {flex: 9},
});

export default MomentPost;