import React from "react";
import { StyleSheet, View } from "react-native";
import { Text } from "./Text";

import moment from "moment";

export default class PlussChatTime extends React.Component {
	shouldRenderDay(curTime, prevTime) {
		return !curTime.isSame(prevTime, "d");
	}

	shouldRenderTime(curTime, prevTime) {
		return curTime.diff(prevTime, "m") >= 10;
	}

	render() {
		const curMesTime = moment(this.props.currentMessage.createdAt).local();
		const prevTime = moment(this.props.previousMessage.createdAt).local();
		const now = moment().local();

		if (
			this.shouldRenderDay(curMesTime, prevTime) ||
			this.shouldRenderTime(curMesTime, prevTime)
		) {
			let timestamp = "";
			if (!now.isSame(curMesTime, "d")) {
				timestamp += curMesTime.format("ddd, D MMM");
				if (!now.isSame(curMesTime, "y")) {
					timestamp += ` ${curMesTime.format("YYYY")}`;
				}
				timestamp += " • ";
			}
			timestamp += curMesTime.format("h:mma");
			return (
				<View style={[styles.container, this.props.containerStyle]}>
					<View style={[styles.wrapper, this.props.wrapperStyle]}>
						<Text style={[styles.text, this.props.textStyle]}>{timestamp}</Text>
					</View>
				</View>
			);
		}
		return null;
	}
}

const styles = StyleSheet.create({
	container: {
		alignItems: "center",
		justifyContent: "center",
		marginTop: 5,
		marginBottom: 10,
	},
	wrapper: {
		// backgroundColor: '#ccc',
		// borderRadius: 10,
		// paddingLeft: 10,
		// paddingRight: 10,
		// paddingTop: 5,
		// paddingBottom: 5,
	},
	text: {
		backgroundColor: "transparent",
		color: "#b2b2b2",
		fontSize: 12,
		fontWeight: "600",
	},
});
