import moment from 'moment';
import React from 'react';
import {
  FlatList,
  ImageStyle,
  Platform,
  RefreshControl,
  Text,
  TextStyle,
  View,
  ViewStyle,
} from 'react-native';
import { Strings } from '../../resources/localization/Strings';
import { ICallLog } from '../../store/callLogs/types';
import { ImageButton } from '../common/ImageButton';
import { IImageButtonStyleProps, IStyledProps } from '../common/types';
import { AvatarPresenceBadge } from '../presence/AvatarPresenceBadge';
import { CallStateImageView } from './CallStateImageView';
import { Divider, TouchableRipple } from 'react-native-paper';
import infoIcon from '../../resources/images/infoIcon.png';
import { useNavigation } from '@react-navigation/native';
interface ICallLogActionsProps
  extends IStyledProps<ICallLogViewStyleProps> {
  callLogs: ICallLog[];
  loading: boolean;
  refreshData: () => void;
  onClickCallLogAction?: (callLog: ICallLog) => void;
  
}
interface ICallLogViewStyleProps {
  noDataMessage?: ViewStyle;
  bodyContainer?: ViewStyle;
  noDataMessageText?: TextStyle;
  callIDate?: ViewStyle;
  presenceIcon?: ImageStyle;
  testText?: TextStyle;
}
const defaultButtonStyle: IImageButtonStyleProps = {
  image: {
    width: 22,
    height: 22,
  },
};
export const CallLogsView: React.FunctionComponent<ICallLogActionsProps> = React.memo(
  ({ callLogs, loading, refreshData, style, onClickCallLogAction }) => {
    const mergedStyle = { ...defaultStyle, ...style };

    const navigation = useNavigation();

    const ListEmpty = () => {
      return (
        <View style={mergedStyle.noDataMessage}>
          <Text style={mergedStyle.noDataMessageText}>
            {Strings.noDataFound}
          </Text>
        </View>
      );
    };

    const renderCallLogsList = ({ item }: { item: ICallLog }) => {
      const goToCallLog = (item: ICallLog) => {
        navigation.navigate('CallHistory', { callLog: item })
      }
      return (
        <View style={{ paddingVertical: 8 }}>
          <TouchableRipple onPress={onClickCallLogAction ? () => onClickCallLogAction(item) : undefined}>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 12 }}>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <AvatarPresenceBadge peer={item.contact} presence={item.contact.presence} />
                        <View style={{ justifyContent: 'center', marginLeft: 8 }}>
                            <Text>{item.contact.name}</Text>
                            <Text style={{ fontSize: 12 }}>{Strings[item.contact.presence]}</Text>
                        </View>
                    </View>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <View style={{ marginRight: 20 }}>
                            {item.lastCall && (
                                <Text style={{ fontSize: 12 }}>
                                    {moment(item.lastCall.date, 'ddd MMM DD HH:mm:ss YYYY').format('MMM DD, YYYY')}
                                </Text>
                            )}
                            <CallStateImageView callState={item.lastCall.state} style={defaultButtonStyle} />
                        </View>

                        
                            <ImageButton
                            imageSource={infoIcon}
                            onPress={() => goToCallLog(item)}
                          />
                      
                    </View>
                </View>
            </TouchableRipple>
            <Divider style={{ marginHorizontal: 30, marginVertical: 8 }} />
        </View>
      );
    };
    const contentStyle: ViewStyle =
      Platform.OS === 'ios' ? { paddingBottom: 120 } : { paddingBottom: 0 };
    return (
      <FlatList
        data={callLogs}
        renderItem={renderCallLogsList}
        ListEmptyComponent={ListEmpty}
        keyExtractor={(item, index) => index.toString()} 
        contentContainerStyle={contentStyle}
        refreshControl={
          <RefreshControl refreshing={loading} onRefresh={refreshData} />
        }
        nestedScrollEnabled={true}
      />
    );
  }   
);

const defaultStyle: ICallLogViewStyleProps = {
  noDataMessage: {
    justifyContent: 'center',
    flex: 1,
    marginTop: 100,
  },
  noDataMessageText: {
    textAlign: 'center',
    fontSize: 10,
  },
};