import React, { FunctionComponent } from 'react';
import { IContact } from '../../store/contacts/types';
import { ContactsSearchTab } from './ContactsSearchTab';
import { StyleSheet, View } from 'react-native';

/**
 * This is the Props interface for the Search Class
 *
 * @interface ISearchProps
 * @field {IActionsProvider} contactActionsProvider handling when the user click on the button in the Contacts Search Tab [for example make a call]
 * @field {boolean} searchPeople does the Contacts wanted to be included in the search?
 * @field {boolean} searchConversations does the Conversation wanted to be included in the search?
 * @field {boolean} searchBubbles does the Bubbles wanted to be included in the search?
 * @field {boolean} searchChannels does the Channels wanted to be included in the search?
 * @field {boolean} searchCompanies does the Companies wanted to be included in the search?
 * @field {(contact: IContact) => void} onClickItem handling when the user click on the Contacts Search Tab
 * @field {ISearchProps} style customer style for components style props provide by ISearchStyleProps
 */
interface ISearchProps {
  searchPeople?: boolean;
  searchConversations?: boolean;
  searchBubbles?: boolean;
  searchChannels?: boolean;
  searchCompanies?: boolean;
  onClickItem: (contact: IContact) => void;
}

/**
 * @module
 * @name Search
 * @version SDKVERSION
 * @public
 * @description
 * This component is managed to handle the Search, either contacts,conversation,Bubbles ...etc,
 * where you can control the search result by setting the Search props [for example searchBubbles = {true}]
 * or manage the actions fot this component
 */

export const Search: FunctionComponent<ISearchProps> = ({
  searchPeople,
  searchConversations,
  searchBubbles,
  searchChannels,
  searchCompanies,
  onClickItem,
}) => {

  return (
    <View style={styles.container}>
      {searchPeople &&  (
        <ContactsSearchTab
           onClickItem={onClickItem} />
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    width: '100%',
    maxWidth: '100%',
    paddingHorizontal: 16, 
  },
});