import React, {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {useSelector} from 'react-redux';
import {UniversityIcon} from '.';
import {NO_MOMENTS} from '../../store/initialStates';
import {RootState} from '../../store/rootreducer';
import {ScreenType} from '../../types';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import Avatar from './Avatar';
import FriendsCount from './FriendsCount';
import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';

type ProfileHeaderProps = {
  userXId: string | undefined;
  screenType: ScreenType;
  isBlocked: boolean;
  handleBlockUnblock: () => void;
};

const ProfileHeader: React.FC<ProfileHeaderProps> = ({
  userXId,
  screenType,
  isBlocked,
  handleBlockUnblock,
}) => {
  const {
    profile: {name = '', university_class = 2021} = {},
    user: {username: userXName = ''},
  } = userXId
    ? useSelector((state: RootState) => state.userX[screenType][userXId])
    : useSelector((state: RootState) => state.user);
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [firstName, lastName] = [...name.split(' ')];

  return (
    <View style={styles.container}>
      <ProfileMoreInfoDrawer
        isOpen={drawerVisible}
        isBlocked={isBlocked}
        handleBlockUnblock={handleBlockUnblock}
        userXId={userXId}
        userXName={userXName}
        setIsOpen={setDrawerVisible}
      />

      <View style={styles.row}>
        <Avatar
          style={styles.avatar}
          userXId={userXId}
          screenType={screenType}
        />
        <View style={styles.header}>
          {name.length <= 16 ? (
            <Text style={styles.name}>{name}</Text>
          ) : (
            <View>
              <Text style={styles.name}>{firstName}</Text>
              <Text style={styles.name}>{lastName}</Text>
            </View>
          )}
          <View style={styles.friendsAndUniversity}>
            <FriendsCount
              style={styles.friends}
              screenType={screenType}
              userXId={userXId}
            />
            <UniversityIcon
              style={styles.university}
              university="brown"
              university_class={university_class}
            />
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    top: SCREEN_HEIGHT / 2.4,
    width: '100%',
    position: 'absolute',
  },
  row: {
    flexDirection: 'row',
  },
  header: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: SCREEN_WIDTH / 18.2,
    marginLeft: SCREEN_WIDTH / 8,
    marginBottom: SCREEN_WIDTH / 50,
  },
  avatar: {
    bottom: SCREEN_WIDTH / 80,
    left: '10%',
  },
  name: {
    marginLeft: SCREEN_WIDTH / 8,
    fontSize: 17,
    fontWeight: '500',
    alignSelf: 'center',
  },
  friends: {
    alignSelf: 'flex-start',
    marginRight: SCREEN_WIDTH / 20,
  },
  university: {
    alignSelf: 'flex-end',
    bottom: 3,
  },
  friendsAndUniversity: {
    flexDirection: 'row',
    flex: 1,
    marginLeft: SCREEN_WIDTH / 10,
    marginTop: SCREEN_WIDTH / 40,
  },
});

export default ProfileHeader;