// Dependencies
import React from 'react';
import {
  View,
  FlatList,
  ViewStyle,
  StyleProp,
  RefreshControl,
} from 'react-native';

// Dto
import { Channel } from '@src/chatClient/dto/channel';

// Components
import ChannelItem from './ChannelItem';
import NoItems from '../NoItems';

// Hoooks
import * as ChannelHooks from '../../hooks/channels';

// Styles
import styles from './styles';

/**
 * Props definition of {@link ChannelList}
 * @interface ChannelListProps
 */
export interface ChannelListProps {
  containerStyle?: StyleProp<ViewStyle>;
}

/**
 * Channel list component.
 * @param props The properties of component.
 * @returns The react component.
 */
export function ChannelList(props: ChannelListProps): React.ReactElement {
  const { containerStyle } = props;
  const { response, loading, fetch } = ChannelHooks.useChannels();

  return (
    <View style={[styles.container, containerStyle]}>
      <FlatList
        refreshControl={<RefreshControl refreshing={loading} onRefresh={fetch} />}
        data={response?.items}
        renderItem={({ item }) => <ChannelItem {...item} />}
        keyExtractor={(channel: Channel) => channel.id}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.contentContainer}
        ListEmptyComponent={<NoItems text="Not chats yet" icon={{ type: 'material-community', name: 'message-bulleted-off', size: 80 }} />}
      />
    </View>
  );
}

export default ChannelList;