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

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 isOwnProfile = loggedInUserName === username;

  return (
    <View style={[styles.container, style]}>
      <View style={styles.header}>
        <Avatar
          style={styles.avatar}
          userXId={userXId}
          screenType={screenType}
        />
        <Text style={styles.headerText}>{username}</Text>
      </View>
      <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;
