import { View, Text, Platform, StyleSheet, FlatList, Image } from 'react-native'
import React, { useState } from 'react'
import Container from '../components/container'
import CustomHeader from '../components/customHeader'
import { connect } from 'react-redux'
import { mapDispatchToProps, mapStateToProps } from '../reducers/contextProvider'
// import IMAGES from '../constants/Images'
import { useRoute } from '@react-navigation/native'
import moment from 'moment';

const NotificationListDetail = (props) => {

const route = useRoute();

const notificationdata = route?.params?.notificationdata;
 console.log(notificationdata, "notification data .....")

  return (
    <Container {...props} pt={0} avoidSafeArea={(Platform.OS == 'ios' ? true : false)}>
      <CustomHeader {...props}showaddstore={true} title={'Notification Detail'} screen={'NotificationListDetail'}  />

      <View style={styles.itemDatas}>

      <View style={[styles.timestamp, {justifyContent:'space-between', width:'100%'}]}>
      <Text style={styles.title}>{notificationdata?.Title}</Text>

      <View style={styles.timestamp}>
         <Text style={styles.time}>{moment(notificationdata?.DateTime).format('MMM DD, YYYY')}</Text>
         <View style={styles.dot} />
         <Text style={styles.time}>{moment(notificationdata?.DateTime).format('HH:mm')}</Text>
         </View>
      </View>

      <Text style={styles.body}>{notificationdata?.msg}</Text>
      </View>
    </Container>
  )
}

export default connect(mapStateToProps, mapDispatchToProps)(NotificationListDetail);

const styles = StyleSheet.create({
  footer: {
    flex: 5,
    width: "100%",
    backgroundColor: "#f2f5f7",
    paddingBottom: 15,
  },
  emptyCartContainer: {
    marginTop: 250,
    justifyContent: "center",
    alignItems: "center",
  },
  emptyCartMessage: {
    fontSize: 28,
    color: '#000'
  },
  body: {
    justifyContent: "flex-start",
    fontSize: 15,
    paddingTop: 5,
    color: "#5c5b56",
    textAlign: "left",
    paddingTop:12
  },
  title: {
    justifyContent: "flex-start",
    color: '#000',
    fontWeight: "600",
    fontSize: 18,
  },
  Notifydata: {
    padding: 8,
    backgroundColor: "#fff",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
    elevation: 3,
  },
  NotifyItem: {
    padding: 1,
    marginTop: 5,
    backgroundColor: "#fff",
    flexDirection: "row",
    marginHorizontal: 5,
    alignItems:'center'
  },
  itemDatas: {
    flex: 1,
    marginHorizontal: 10,
    flexDirection: "column",
    alignItems:'flex-start',
    alignSelf:'flex-start',
    paddingTop:10
  },
  time: {
    justifyContent: "flex-start",
    fontSize: 14,
    paddingTop: 5,
    color: "#878a88",
    textAlign: "left",
  },
  timestamp: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  dot: {
    width: 8,
    height: 8,
    backgroundColor: '#8F8F8F',
    borderRadius: 50,
    marginTop: 5,
    marginHorizontal: 6,
  },
});