import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import { loadImageFromURL } from '../../services';
import { ProfilePreviewType } from '../../types';
import { normalize, SCREEN_WIDTH } from '../../utils';
import { defaultUserProfile } from '../../utils/users';

interface SearchResults {
  profileData: ProfilePreviewType;
}

const SearchResultsCell: React.FC<SearchResults> = ({
  profileData: {
    id,
    name,
    username,
    first_name,
    last_name,
    thumbnail_url,
    category,
  },
}) => {
  const [avatar, setAvatar] = useState('');
  useEffect(() => {
    (async () => {
      if (thumbnail_url !== undefined) {
        try {
          const response = await loadImageFromURL(thumbnail_url);
          if (response) {
            setAvatar(response);
          }
        } catch (error) {
          console.log('Error while downloading ', error);
          throw error;
        }
      }
    })();
  }, [thumbnail_url]);

  const userCell = () => {
    return (
      <View style={styles.cellContainer}>
        <Image
          defaultSource={defaultUserProfile()}
          source={{uri: avatar}}
          style={styles.imageContainer}
        />
        <View style={[styles.initialTextContainer, styles.multiText]}>
          <Text style={styles.initialTextStyle}>{`@${username}`}</Text>
          <Text style={styles.secondaryTextStyle}>
            {first_name + ' ' + last_name}
          </Text>
        </View>
      </View>
    );
  };

  const searchIcon = () => {
    return require('../../assets/images/search.png');
  };

  const universityIcon = () => {
    return require('../../assets/images/bwbadges.png');
  };

  const categoryCell = () => {
    return (
      <View style={styles.cellContainer}>
        <View style={[styles.imageContainer, styles.categoryBackground]}>
          <Image
            resizeMode="contain"
            source={category === 'Brown' ? universityIcon() : searchIcon()}
            style={styles.categoryImage}
          />
        </View>
        <View style={styles.initialTextContainer}>
          <Text style={styles.initialTextStyle}>{name}</Text>
        </View>
      </View>
    );
  };

  return (
    <>
      {name !== undefined && categoryCell()}
      {name === undefined && userCell()}
    </>
  );
};

const styles = StyleSheet.create({
  cellContainer: {
    flexDirection: 'row',
    marginHorizontal: SCREEN_WIDTH * 0.08,
    marginBottom: SCREEN_WIDTH * 0.08,
  },
  imageContainer: {
    width: SCREEN_WIDTH * 0.112,
    height: SCREEN_WIDTH * 0.112,
    borderRadius: (SCREEN_WIDTH * 0.112) / 2,
  },
  categoryBackground: {
    backgroundColor: 'rgba(196, 196, 196, 0.45)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  categoryImage: {
    width: '40%',
    height: '40%',
  },
  initialTextContainer: {
    marginLeft: SCREEN_WIDTH * 0.08,
    flexDirection: 'column',
    justifyContent: 'center',
  },
  initialTextStyle: {
    fontWeight: '500',
    fontSize: normalize(14),
  },
  secondaryTextStyle: {
    fontWeight: '500',
    fontSize: normalize(12),
    color: '#828282',
  },
  multiText: {justifyContent: 'space-between'},
});

export default SearchResultsCell;