import React from 'react';

import Avatar from './Avatar';
import FollowCount from './FollowCount';
import {View, Text, StyleSheet} from 'react-native';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {AuthContext, ProfileContext} from '../../routes/';

type ProfileHeaderProps = {
  isProfileView: boolean;
};

const ProfileHeader: React.FC<ProfileHeaderProps> = ({isProfileView}) => {
  const {
    profile: {name},
  } = isProfileView
    ? React.useContext(ProfileContext)
    : React.useContext(AuthContext);
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Avatar style={styles.avatar} isProfileView={isProfileView} />
        <View style={styles.header}>
          <Text style={styles.name}>{name}</Text>
          <View style={styles.row}>
            <FollowCount
              style={styles.follows}
              mode="followers"
              count={318412}
              isProfileView={isProfileView}
            />
            <FollowCount
              style={styles.follows}
              mode="following"
              count={1036}
              isProfileView={isProfileView}
            />
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    top: SCREEN_HEIGHT / 2.4,
    paddingHorizontal: SCREEN_WIDTH / 20,
    marginBottom: SCREEN_HEIGHT / 10,
    position: 'absolute',
  },
  row: {
    flexDirection: 'row',
  },
  header: {
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: SCREEN_HEIGHT / 40,
    marginLeft: SCREEN_WIDTH / 10,
    marginBottom: SCREEN_HEIGHT / 50,
  },
  avatar: {
    bottom: SCREEN_HEIGHT / 80,
  },
  name: {
    fontSize: 20,
    fontWeight: '700',
    marginBottom: SCREEN_HEIGHT / 80,
  },
  follows: {
    marginHorizontal: SCREEN_HEIGHT / 50,
  },
});

export default ProfileHeader;