import React, { useEffect } from 'react';
import { Dimensions, StyleSheet, Text, View, ViewStyle } from 'react-native';
import { Strings } from '../../resources/localization/Strings';
import { eventEmitter, EventType } from '../../services/EventEmitter';
import { getContactsResult, updateContactPresence } from '../../store/contacts/contactsSlice';
import { IContact, Presence } from '../../store/contacts/types';
import { IStyledProps } from '../common/types';
import { DataProvider, LayoutProvider, RecyclerListView } from 'recyclerlistview';
import { useAppDispatch } from '../../store/hooks';

/**
 * This is the Props interface for the Contacts Class
 *
 * @interface IContactsComponentProps
 * @field {boolean} networkContactsEnabled is used for enable or disable the roster contacts.
 * @field {boolean} localContactsEnabled is used for enable or disable the local phone contacts.
 */
export interface IContactsComponentProps extends IStyledProps<IContactsStyleProps> {
  contacts: IContact[]
  localContactsEnabled?: boolean;
  networkContactsEnabled?: boolean;
  cellWidth?: number;
  cellHeight?: number;
  renderItems: (contact: IContact) => React.ReactElement;
  renderEmptyList?: () => React.ReactElement;
}

export interface IContactsStyleProps {
  containerStyle?: ViewStyle;
  NoDataMessages?: Text;
}
/**
 * @module
 * @name Contacts
 * @version SDKVERSION
 * @public
 * @description
 * This module manages _contacts. A contact is defined by a set of public information (name, firstname, avatar...) and a set of private information.
 * check the Contact object file to know more about the contact props<br>
 *  Using this module, you can get access to your network _contacts and the local phone contact.
 *  <br>
 */

const ContactsContainer: React.FunctionComponent<IContactsComponentProps> = ({
  contacts,
  cellHeight,
  cellWidth,
  renderItems,
  style,
  renderEmptyList
}) => {
  const dispatch = useAppDispatch();
  const width = cellWidth ? cellWidth : Dimensions.get('window').width;
  const height = cellHeight ? cellHeight : 80;
  const mergedStyle = { ...defaultStyle, ...style };
  const dataProvider = new DataProvider((r1: any, r2: any) => {
    return r1 !== r2;
  }).cloneWithRows(contacts);

  useEffect(() => {
    eventEmitter.addListener(
      EventType.ContactsUpdated,(eventData: IContact[]) =>{
        dispatch(getContactsResult(eventData));
      });
    
    eventEmitter.addListener(
      EventType.PresenceUpdated,
      (eventData: { presence: Presence; contactJId: string }) => {
        dispatch(updateContactPresence(eventData))
      }
    )
  }, []);

  const layoutProvider = new LayoutProvider(() => 'CONTACTS',
    (type: any, dim: { width: number; height: number }) => {
      switch (type) {
        case 'CONTACTS':
          dim.width = width;
          dim.height = height;
          break;
        default:
          dim.width = width;
          dim.height = 0;
      }
    }
  );
  const renderItemsView = (type: string | number, contact: IContact) => {
    return renderItems(contact);
  };
  const renderEmptyListView = () => {
    if (renderEmptyList) {
      return renderEmptyList();
    }
    else {
      return (
        <View>
          <Text>
            {Strings.noDataFound}
          </Text>
        </View>
      );
    }
  }
  const renderContactsListContent = () => {
    if (contacts.length === 0) {
      return renderEmptyListView()
    }
    else {
      return (
        <RecyclerListView
          layoutProvider={layoutProvider}
          dataProvider={dataProvider}
          rowRenderer={renderItemsView}
        />
      )
    }
  }

  return (
    <View style={mergedStyle.containerStyle}>
      {renderContactsListContent()}
    </View>
  );
};

export const Contacts = ContactsContainer;

const defaultStyle: IContactsStyleProps = StyleSheet.create({
  containerStyle: { flex: 1, backgroundColor: '#ffffff', minHeight: 1, flexDirection: 'row' },
});