import { useTranslation } from "react-i18next";
import {
	BarChart,
	Bar,
	Rectangle,
	XAxis,
	YAxis,
	CartesianGrid,
	Tooltip,
	Legend,
	ResponsiveContainer,
} from "recharts";

import { ChartContainer } from "@/shared";

type ObjectType = {
	key: string;
	titleKey: string;
	count: number;
};

export const CountOfObjectTypesChart = () => {
	const { t } = useTranslation("translation");
	const data: ObjectType[] = [
		{ key: "K5M", titleKey: t("K5M"), count: 88 },
		{ key: "K14ML", titleKey: t("K14ML"), count: 10 },
		{ key: "Unknown", titleKey: t("Unknown"), count: 7 },
		{ key: "K9K", titleKey: t("K9K"), count: 5 },
		{ key: "Ritm.tracker", titleKey: t("Ritm.tracker"), count: 2 },
		{ key: "K5AA", titleKey: t("K5AA"), count: 1 },
	];

	return (
		<ChartContainer
			titleKey={t("Count of object types")}
			isFetching={false}
		>
			<ResponsiveContainer width="100%" height="100%">
				<BarChart
					width={400}
					height={300}
					data={data}
					margin={{
						top: 5,
						right: 30,
						left: 20,
						bottom: 5,
					}}
				>
					<CartesianGrid strokeDasharray="3 3" />
					<XAxis dataKey="titleKey" />
					<YAxis dataKey="count" />
					<Tooltip />
					<Legend />
					<Bar
						dataKey="count"
						name={t("Count")}
						label={t("Count")}
						legendType="star"
						fill="var(--primary-600)"
						activeBar={
							<Rectangle
								fill="var(--primary-600)"
								stroke="var(--primary-600)"
							/>
						}
						layout="vertical"
					/>
				</BarChart>
			</ResponsiveContainer>
		</ChartContainer>
	);
};
