import dayjs from "dayjs";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { z } from "zod";


import { ByStateProperty } from "@/models/ByStateProperty";
import { KeyValue } from "@/models/KeyValue";
import { Button, Checkbox, Label, Separator } from "@/shared";
import { DateTimeRangePicker } from "@/shared/DateTimeRangePicker";
import { useReportBuilderStore } from "@/store/report-builder.store";
import { useFormikWithZod } from "@/utils/useFormikWithZod";

import { ReportExtraProps } from "../model/ReportExtraProps";


interface FormType {
	Properties: string[];
	From: Date;
	To: Date;
}

const defaultExtra: FormType = {
	Properties: ["Name", "IsOnline", "Description"],
	From: dayjs().startOf("day").toDate(),
	To: dayjs().toDate(),
};

const validationSchema = z.object({
	Properties: z.array(z.string()).min(1, "Properties must have at least 1 property"),
	From: z.date(),
	To: z.date(),
});

export function ByStateReportProperties({ onIsValid }: ReportExtraProps) {
	const { t } = useTranslation("translation");
	const { type, getExtraForType, setExtraForType } = useReportBuilderStore();

	const properties: KeyValue<ByStateProperty>[] = [
		// Id: t("objectId"),
		{ key: "Name", value: t("name") },
		{ key: "IsOnline", value: t("status") },
		{ key: "Description", value: t("description") },
		{ key: "Address", value: t("address") },
		{ key: "Groups", value: t("groups") },
	];

	const formik = useFormikWithZod({
		initialValues: (getExtraForType(type) as FormType) || defaultExtra,
		validationSchema,
		onSubmit: () => {},
	});

	useEffect(() => {
		setExtraForType(type, formik.values);
	}, [formik.values, type, setExtraForType]);

	useEffect(() => {
		onIsValid(formik.isValid);
	}, [formik.isValid, onIsValid]);

	function setProperties(properties: string[]) {
		formik.setFieldValue("Properties", properties);
	}

	return (
		<form onSubmit={formik.handleSubmit}>
			<div className="flex flex-col gap-4">
				<div className="flex items-center gap-3">
					<Checkbox
						id="allProperties"
						checked={formik.values.Properties.length === properties.length}
						onCheckedChange={() => {
							if (formik.values.Properties.length === properties.length) {
								setProperties([]);
							} else {
								setProperties(
									properties.map((property) => property.key),
								);
							}
						}}
					/>
					<Label htmlFor="allProperties" className="cursor-pointer">
						{t("All properties")}
					</Label>
				</div>

				<Separator />

				<div className="flex flex-wrap gap-3">
					{properties.map((property) => (
						<div className="flex items-center gap-3" key={property.key}>
							<Checkbox
								id={property.key}
								checked={formik.values.Properties.includes(property.key)}
								onCheckedChange={(checked) => {
									if (checked) {
										setProperties([
											...formik.values.Properties,
											property.key,
										]);
									} else {
										setProperties(
											formik.values.Properties.filter(
												(x: string) => x !== property.key,
											),
										);
									}
								}}
							/>
							<Label htmlFor={property.key}>{property.value}</Label>
						</div>
					))}
				</div>

				<DateTimeRangePicker
					name="dateRange"
					onChange={(_, x) => {
						formik.setFieldValue("From", x.from);
						formik.setFieldValue("To", x.to);
					}}
				/>

				<Button
					variant="outline"
					onClick={() => formik.setValues(defaultExtra)}
					type="button"
				>
					{t("reset")}
				</Button>
			</div>
		</form>
	);
}
