import React, {useState} from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ViewProps,
} from 'react-native';
import {MomentMoreInfoDrawer} from '../profile';
import {loadUserMoments} from '../../store/actions';
import {useDispatch, useSelector, useStore} from 'react-redux';
import {ScreenType} from '../../types';
import TaggAvatar from '../profile/TaggAvatar';
import {useNavigation} from '@react-navigation/native';
import {RootState} from '../../store/rootReducer';
import {fetchUserX, userXInStore} from '../../utils';

interface MomentPostHeaderProps extends ViewProps {
  userXId?: string;
  screenType: ScreenType;
  username: string;
  momentId: string;
}

const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
  userXId,
  screenType,
  username,
  momentId,
  style,
}) => {
  const [drawerVisible, setDrawerVisible] = useState(false);
  const dispatch = useDispatch();
  const navigation = useNavigation();
  const {userId: loggedInUserId, username: loggedInUserName} = useSelector(
    (state: RootState) => state.user.user,
  );
  const state: RootState = useStore().getState();
  const isOwnProfile = loggedInUserName === username;
  const navigateToProfile = async () => {
    if (userXId && !userXInStore(state, screenType, userXId)) {
      await fetchUserX(
        dispatch,
        {userId: userXId, username: username},
        screenType,
      );
    }
    navigation.navigate('Profile', {
      userXId: isOwnProfile ? undefined : userXId,
      screenType,
    });
  };

  return (
    <View style={[styles.container, style]}>
      <TouchableOpacity onPress={navigateToProfile} style={styles.header}>
        <TaggAvatar
          style={styles.avatar}
          userXId={userXId}
          screenType={screenType}
        />
        <Text style={styles.headerText}>{username}</Text>
      </TouchableOpacity>
      <MomentMoreInfoDrawer
        isOpen={drawerVisible}
        setIsOpen={setDrawerVisible}
        momentId={momentId}
        isOwnProfile={isOwnProfile}
        dismissScreenAndUpdate={() => {
          dispatch(loadUserMoments(loggedInUserId));
          navigation.pop();
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: '2%',
  },
  header: {
    alignItems: 'center',
    flexDirection: 'row',
    flex: 1,
  },
  avatar: {
    flex: 0.2,
    aspectRatio: 1,
    borderRadius: 999999,
    marginLeft: '3%',
  },
  headerText: {
    fontSize: 15,
    fontWeight: 'bold',
    color: 'white',
    paddingHorizontal: '3%',
    flex: 1,
  },
});
export default MomentPostHeader;