import { memo, type ReactNode } from 'react';

import { addDays } from '@mary/date-fns';

import { clockNumeric, weekdayLong, weekdayMonthDay, weekdayMonthDayYear } from '#/locale/intl/datetime';

import { Text } from '#/components/Text';

import { m } from '#/paraglide/messages';

import * as css from './DateDivider.css';
import { localDateString } from './util';

let DateDivider = ({ date: dateStr }: { date: string }): ReactNode => {
	let date: string;
	const time = clockNumeric.format(new Date(dateStr));

	const timestamp = new Date(dateStr);

	const today = new Date();
	const yesterday = addDays(today, -1);
	const oneWeekAgo = addDays(today, -7);

	if (localDateString(today) === localDateString(timestamp)) {
		date = m['components.dms.time.today']();
	} else if (localDateString(yesterday) === localDateString(timestamp)) {
		date = m['components.dms.time.yesterday']();
	} else {
		if (timestamp < oneWeekAgo) {
			if (timestamp.getFullYear() === today.getFullYear()) {
				date = weekdayMonthDay.format(timestamp);
			} else {
				date = weekdayMonthDayYear.format(timestamp);
			}
		} else {
			date = weekdayLong.format(timestamp);
		}
	}

	return (
		<div className={css.root}>
			<Text color="textContrastMedium" size="xs">
				{m['components.dms.time.dateAtTime']({ date, time })}
			</Text>
		</div>
	);
};
DateDivider = memo(DateDivider);
export { DateDivider };