import { useTranslation } from "react-i18next";

import { ReportType } from "@/contracts/client.schemas";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/shared";
import { useReportBuilderStore } from "@/store/report-builder.store";

import { useReportTitle } from "../lib/useReportTitle";

export function ReportTypeSelector() {
	const { t } = useTranslation("translation");
	const { type, setType } = useReportBuilderStore();
	const { getTitle } = useReportTitle();

	const typeList: ReportType[] = [
		ReportType.ByState,
		ReportType.Journal,
		ReportType.SummaryEvents,
	];

	function switchReportType(value: ReportType) {
		setType(value);
	}

	return (
		<div className="flex justify-stretch gap-4">
			<h4 className="grow text-center text-lg text-nowrap">
				{t("Select report type")}
			</h4>
			<Select onValueChange={switchReportType} value={type}>
				<SelectTrigger className="w-full">
					<SelectValue placeholder={t("Select report type")} />
				</SelectTrigger>
				<SelectContent>
					{typeList.map((option) => (
						<SelectItem key={option} value={option}>
							{getTitle(option)}
						</SelectItem>
					))}
				</SelectContent>
			</Select>
		</div>
	);
}
