import React, {useState, useContext} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
import {TAGG_DARK_BLUE} from '../../constants';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import Avatar from './Avatar';
import MoreInfoDrawer from './MoreInfoDrawer';
import FollowCount from './FollowCount';
import {useSelector} from 'react-redux';
import {RootState} from '../../store/rootreducer';
import {ScreenType} from '../../types';

type ProfileHeaderProps = {
  userXId: string;
  screenType: ScreenType;
};

const ProfileHeader: React.FC<ProfileHeaderProps> = ({userXId, screenType}) => {
  const {profile: {name = ''} = {}} = userXId
    ? useSelector((state: RootState) => state.userX[screenType][userXId])
    : useSelector((state: RootState) => state.user);

  const [drawerVisible, setDrawerVisible] = useState(false);

  return (
    <View style={styles.container}>
      {!userXId && (
        <>
          <TouchableOpacity
            style={styles.more}
            onPress={() => {
              setDrawerVisible(true);
            }}>
            <MoreIcon height={30} width={30} color={TAGG_DARK_BLUE} />
          </TouchableOpacity>
          <MoreInfoDrawer isOpen={drawerVisible} setIsOpen={setDrawerVisible} />
        </>
      )}
      <View style={styles.row}>
        <Avatar
          style={styles.avatar}
          userXId={userXId}
          screenType={screenType}
        />
        <View style={styles.header}>
          <Text style={styles.name}>{name}</Text>
          <View style={styles.row}>
            <FollowCount
              style={styles.follows}
              mode="followers"
              screenType={screenType}
              userXId={userXId}
            />
            <FollowCount
              style={styles.follows}
              mode="following"
              screenType={screenType}
              userXId={userXId}
            />
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    top: SCREEN_HEIGHT / 2.4,
    width: '100%',
    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,
  },
  more: {
    position: 'absolute',
    right: '5%',
    marginTop: '4%',
    zIndex: 1,
  },
});

export default ProfileHeader;