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


const SearchResultsCell: React.FC<ProfilePreviewType> = ({
    item: {id, name, username, first_name, last_name, thumbnail_url},
  }) => {
    const [avatar, setAvatar] = useState('');
    useEffect(() => {
      (async () => {
        const response = await loadImageFromURL(thumbnail_url);
        if (response) {
          setAvatar(response);
        }
      })();
    }, []);
  
    const userCell = () => {
      return (
        <View
          style={{
            flexDirection: 'row',
            marginHorizontal: 24,
            marginBottom: 24,
          }}>
          <Image
            defaultSource={defaultUserProfile()}
            source={{uri: avatar}}
            style={{width: 42, height: 42, borderRadius: 21}}
          />
          <View
            style={{
              marginLeft: 30,
              flexDirection: 'column',
              justifyContent: 'space-between',
            }}>
            <Text
              style={{
                fontWeight: '500',
                fontSize: normalize(14),
              }}>
              {username}
            </Text>
            <Text
              style={{
                fontWeight: '500',
                fontSize: normalize(14),
              }}>
              {first_name + ' ' + last_name}
            </Text>
          </View>
        </View>
      );
    };
  
    const categoryCell = () => {
      return (
        <View
          style={{
            flexDirection: 'row',
            marginHorizontal: 24,
            marginBottom: 24,
          }}>
          <Image
            defaultSource={defaultUserProfile()}
            source={{uri: avatar}}
            style={{width: 42, height: 42, borderRadius: 21}}
          />
          <View
            style={{
              marginLeft: 30,
              flexDirection: 'column',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontWeight: '500',
                fontSize: normalize(14),
              }}>
              {name}
            </Text>
          </View>
        </View>
      );
    };
  
    return (
      <>
        {name !== undefined && categoryCell()}
        {name === undefined && userCell()}
      </>
    );
  };

  export default SearchResultsCell