import React from 'react';
import { Dimensions, View } from 'react-native';
import { RecyclerListView, DataProvider, LayoutProvider } from 'recyclerlistview';
import { IContact } from '../../store/contacts/types';
import { ContactItemView } from './ContactItemView';

const { width } = Dimensions.get('window');

interface IProps {
  contacts: IContact[];
  onClickItem: (contact: IContact) => void;
  onCallPress: (contact: IContact) => void;
  onChatPress: (contact: IContact) => void;
}

export const SearchResultListView: React.FunctionComponent<IProps> = ({ contacts, onClickItem, onCallPress, onChatPress }) => {
  const dataProvider = new DataProvider((r1, r2) => r1 !== r2).cloneWithRows(contacts);

  const layoutProvider = new LayoutProvider(
    () => 0, // All items have the same type
    (type, dim) => {
      dim.width = width;
      dim.height = 80;
    }
  );

  const rowRenderer = (type: any, data: IContact) => {
    return (
      <ContactItemView
        contact={data}
        onClickItem={onClickItem}
        onCallPress={onCallPress}
        onChatPress={onChatPress}
      />
    );
  };

  if (contacts.length === 0) {
    return null;
  }

  return (
    <View style={{ flex: 1 }}>
      <RecyclerListView
        layoutProvider={layoutProvider}
        dataProvider={dataProvider}
        rowRenderer={rowRenderer}
      />
    </View>
  );
};