import {
	Checkbox,
	FormControlLabel,
	FormGroup,
	Grid2,
	Stack,
	Typography,
} from "@mui/material";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import * as yup from "yup";

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

import { ReportBuilderActions } from "../components/ReportBuilderActions";
import { useReportForm } from "../hooks/useReportForm";

import { propertiesFieldName } from "./constants";
import { ByStateProperty } from "./Properties";

const validationSchema = yup.object().shape({
	[propertiesFieldName]: yup
		.array()
		.of(yup.string())
		.required("Properties is required")
		.min(1, "Properties must have at least 1 property"),
});

interface FormType {
	Properties: ByStateProperty[];
}
export const ByStateReportProperties: FC = () => {
	const { t } = useTranslation();

	const labels: { [key: string]: string } = {
		// Id: t("objectId"),
		Name: t("assetName"),
		// IsOnline: t("status"),
		Description: t("description"),
		Address: t("address"),
		Groups: t("objectGroups"),
	};

	const initialValues: FormType = {
		Properties: ["Name", "Description"],
	};

	const formik = useReportForm(
		initialValues,
		validationSchema,
		ReportType.ByState,
	);

	function setFieldValue(properties: ByStateProperty[]) {
		formik.setFieldValue(propertiesFieldName, properties);
	}

	const handlePropertyChange = (
		event: React.ChangeEvent<HTMLInputElement>,
	) => {
		const { value, checked } = event.target;

		if (checked) {
			setFieldValue([
				...formik.values.Properties,
				value as ByStateProperty,
			]);
		} else {
			setFieldValue(
				formik.values.Properties.filter(
					(prop: string) => prop !== value,
				),
			);
		}
	};

	return (
		<form onSubmit={formik.handleSubmit}>
			<Stack direction="column" spacing={2}>
				<FormControlLabel
					control={
						<Checkbox
							checked={
								formik.values.Properties.length ===
								Object.keys(labels).length
							}
							onChange={() => {
								if (
									formik.values.Properties.length ===
									Object.keys(labels).length
								) {
									setFieldValue([]);
								} else {
									setFieldValue(
										Object.keys(
											labels,
										) as ByStateProperty[],
									);
								}
							}}
						/>
					}
					label={
						<Typography variant="subtitle1">
							{t("Все свойства")}
						</Typography>
					}
					sx={{
						userSelect: "none",
					}}
				/>
				<FormGroup>
					<Grid2
						sx={{
							padding: 1,
							border: "1px solid #ccc",
							borderRadius: 1,
						}}
					>
						{Object.keys(labels).map((key) => (
							<FormControlLabel
								key={key}
								control={
									<Checkbox
										checked={formik.values.Properties.includes(
											key as ByStateProperty,
										)}
										onChange={handlePropertyChange}
										name="Properties"
										value={key}
									/>
								}
								label={labels[key]}
								sx={{
									userSelect: "none",
								}}
							/>
						))}
					</Grid2>
				</FormGroup>

				<ReportBuilderActions
					isLoading={formik.isSubmitting}
					isValid={formik.isValid}
					onCancel={formik.resetForm}
				/>
			</Stack>
		</form>
	);
};
