import { MenuItem, Select } from "@mui/material";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { CountOfEventsType } from "@/contracts/client.schemas";

import { EventsOfTime } from "./EventsOfTime";

export const EventsOfTimeSwitcher = () => {
	const { t } = useTranslation("translation");
	const [type, setType] = useState<CountOfEventsType>(CountOfEventsType.Day);

	const controls = (
		<Select
			size="small"
			value={type}
			onChange={(e) => setType(e.target.value as CountOfEventsType)}
		>
			<MenuItem value={CountOfEventsType.Day}>{t("Day")}</MenuItem>
			<MenuItem value={CountOfEventsType.Week}>{t("Week")}</MenuItem>
			<MenuItem value={CountOfEventsType.Month}>{t("Month")}</MenuItem>
			<MenuItem value={CountOfEventsType.Year}>{t("Year")}</MenuItem>
		</Select>
	);

	return (
		<EventsOfTime
			type={type}
			controls={controls}
			titleKey={
				type === CountOfEventsType.Day
					? t("Events of Day")
					: type === CountOfEventsType.Week
						? t("Events of Week")
						: type === CountOfEventsType.Month
							? t("Events of Month")
							: t("Events of Year")
			}
		/>
	);
};
