import moment from 'moment';

import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
import { Strings } from '../../resources/localization/Strings';
import { ICallLogInfo } from '../../store/callLogs/types';
import { Header } from '../common/Header';
import { IImageButtonStyleProps } from '../common/types';
import { CallStateImageView } from './CallStateImageView';
import { CallHistoryNavigationProp, CallHistoryRouteProp } from '../../RootStackParamList';
import { Divider, useTheme } from 'react-native-paper';

interface IProps {
  navigation: CallHistoryNavigationProp;
  route: CallHistoryRouteProp
}

const defaultButtonStyle: IImageButtonStyleProps = {
  image: {
    width: 30,
    height: 30,
  },
};
export const CallHistory: React.FunctionComponent<IProps> = ({
  route
}) => {
  const callLog = route.params.callLog;
  const ListEmpty = () => {
    return (
        <View style={styles.center}>
            <Text>{Strings.noDataFound}</Text>
        </View>
    );
  };

  const formatCallDate = (dateInput: number | string ) => {
    // if (!dateInput) return ' ';
    const dateString = String(dateInput);
    
    // Check if it's a Unix timestamp (from Android)
    if (!isNaN(Number(dateString))) {
      return moment(Number(dateString)).format('MMM DD, YYYY');
    }
    
     // Handle iOS format: "Thu Oct 03 09:43:07 2024"
    return moment(dateString, 'ddd MMM DD HH:mm:ss YYYY').format('MMM DD, YYYY');

  };

  const renderCallHistory = ({ item }: { item: ICallLogInfo }) => {
    return (
      <View style={styles.container}>
            <View style={styles.row}>
                <View style={styles.callStateContainer}>
                <CallStateImageView callState={item.state} style={defaultButtonStyle} />
                <View style={styles.infoContainer}>
                        <View style={styles.infoRow}>
                            <Text style={styles.callText}>{item.state} Call</Text>
                            {item.duration != null ? (
                                <Text style={styles.callText}> - {item.duration}</Text>
                            ) : null}
                        </View>
                        <Text style={styles.dateText}>
                            {formatCallDate(item.date)}

                        </Text>
                    </View>
                </View>
            </View>
            <Divider style={{ backgroundColor: 'gray', marginVertical: 8 }} />
        </View>
    )
  };
  const keyExtractor = (callLogItem: ICallLogInfo) => {
    return callLogItem.date;
  };
  const renderCenterHeader = () => {
    return <Text style={styles.headerText}>{callLog.contact.name}</Text>;
  }
  return (
    < >
      <Header centerComponent={renderCenterHeader} />
      <FlatList
        data={callLog.callsList}
        renderItem={renderCallHistory}
        ListEmptyComponent={ListEmpty}
        keyExtractor={keyExtractor}
      />
    </>
  );
};

const styles = StyleSheet.create({
  center: {
      justifyContent: 'center',
      alignItems: 'center',
      flex: 1,
  },
  container: {
      paddingLeft: 16,
      paddingRight: 20,
      paddingVertical: 8,
      borderBottomWidth: 0, // React Native Paper doesn't use borderBottomWidth
  },
  row: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      width: '100%',
  },
  callStateContainer: {
      flexDirection: 'row',
      alignItems: 'center',
  },
  infoContainer: {
      justifyContent: 'center',
      marginLeft: 16,
  },
  infoRow: {
      flexDirection: 'row',
      justifyContent: 'flex-start',
  },
  callText: {
      fontSize: 14, // Adjust font size as needed
  },
  dateText: {
      fontSize: 14, // Adjust font size as needed
  },
  headerText: {
    fontSize :16,
    color: 'white',
    marginHorizontal :5
  }
});