import React, {useEffect, useState} from 'react';
import {
  SectionList,
  StyleSheet,
  Text,
  View,
  Keyboard,
  SectionListData,
} from 'react-native';
import {useSelector} from 'react-redux';
import {RootState} from '../../store/rootreducer';
import {NO_RESULTS_FOUND} from '../../constants/strings';
import {PreviewType, ScreenType} from '../../types';
import {normalize, SCREEN_WIDTH} from '../../utils';
import SearchResultsCell from './SearchResultCell';
import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';

interface SearchResultsProps {
  // TODO: make sure results come in as same type, regardless of profile, category, badges
  results: SectionListData<any>[];
  previewType: PreviewType;
  screenType: ScreenType;
}

const sectionHeader: React.FC<Boolean> = (showBorder: Boolean) => {
  if (showBorder) {
    return <View style={styles.sectionHeaderStyle} />;
  }
  return null;
};

const SearchResultList: React.FC<SearchResultsProps> = ({results}) => {
  const [showEmptyView, setshowEmptyView] = useState<boolean>(false);
  const {user: loggedInUser} = useSelector((state: RootState) => state.user);
  const tabBarHeight = useBottomTabBarHeight();

  useEffect(() => {
    if (results && results.length > 0) {
      setshowEmptyView(
        results[0].data.length === 0 &&
          results[1].data.length === 0 &&
          results[2].data.length === 0,
      );
    }
  }, [results]);

  return showEmptyView ? (
    <View style={styles.container} onTouchStart={Keyboard.dismiss}>
      <Text style={styles.noResultsTextStyle}>{NO_RESULTS_FOUND}</Text>
    </View>
  ) : (
    <SectionList
      onScrollBeginDrag={Keyboard.dismiss}
      contentContainerStyle={[{paddingBottom: tabBarHeight}]}
      sections={results}
      keyExtractor={(item, index) => item.id + index}
      renderItem={({item}) => {
        return (
          <SearchResultsCell profileData={item} loggedInUser={loggedInUser} />
        );
      }}
      renderSectionHeader={({section: {data}}) =>
        sectionHeader(data.length !== 0)
      }
      stickySectionHeadersEnabled={false}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 30,
    alignItems: 'center',
  },
  sectionHeaderStyle: {
    width: '100%',
    height: 0.5,
    marginVertical: 5,
    backgroundColor: '#C4C4C4',
  },
  noResultsTextContainer: {
    justifyContent: 'center',
    flexDirection: 'row',
    width: SCREEN_WIDTH,
  },
  noResultsTextStyle: {
    fontWeight: '500',
    fontSize: normalize(14),
  },
});

export default SearchResultList;