import { Backdrop, Button, Stack, TextField, Typography } from "@mui/material";
import { useFormik } from "formik";
import { FC, useState } from "react";
import { useTranslation } from "react-i18next";
import { z } from "zod";

import { DialogDefaultHeader } from "@/contexts/dialog/ui/DialogDefaultHeader";
import { useAudioStore } from "@/features";
import { DialogContent } from "@/shared";

import { Loader } from "../../../common/components/Loader";
import { http } from "../../../services/http.service";
import { useWatcherStore } from "../store/watcher.store";

// import { Dialogs, useDialogsStore } from "../store/dialogs.store";

interface Values {
	closeComment: string;
}

export const AllAlarmResettingDialog: FC = () => {
	const [isLoading, setIsLoading] = useState(false);
	const { t } = useTranslation();
	const audio = useAudioStore();
	const { commonAlarms } = useWatcherStore();
	// const { close } = useDialogsStore();

	const initialValues: Values = {
		closeComment: t("alarmsAreResetting"),
	};

	const validationSchema = z.object({
		closeComment: z.string({
			required_error: t("requiredField"),
			invalid_type_error: t("requiredField"),
		}),
		// login: z.string({ required_error: t("requiredField") }),
		// password: z.string({ required_error: t("requiredField") })
	});

	const {
		isValid,
		values,
		touched,
		errors,
		handleBlur,
		handleChange,
		handleSubmit,
		resetForm,
	} = useFormik({
		initialValues,
		validationSchema,
		onSubmit: async (values) => {
			setIsLoading(true);

			const assetIdListWithAlarm = commonAlarms.map(
				(x) => x.event.assetId,
			);

			http.post("/api/events/reset-alarms", {
				message: values.closeComment,
				assetIdList: assetIdListWithAlarm,
			})
				.then(() => {
					audio.setIsPlaying(false);
				})
				.catch((x) => {
					console.error(x);
				})
				.finally(() => {
					setIsLoading(false);
				});
		},
	});

	return (
		<DialogContent>
			<DialogDefaultHeader />

			<Stack spacing={3}>
				<Typography variant="h5" textAlign="center">
					{t(
						"toConfirmThatAllAlarmsAreResetYouMustEnterYourLoginAndPassword",
					)}
				</Typography>

				<Backdrop open={isLoading}>
					<Loader />
				</Backdrop>

				<form onSubmit={handleSubmit}>
					<Stack spacing={2}>
						<TextField
							name="closeComment"
							label={t("commentary")}
							value={values.closeComment}
							error={
								touched.closeComment && !!errors.closeComment
							}
							helperText={
								touched.closeComment && errors.closeComment
							}
							onBlur={handleBlur}
							onChange={handleChange}
						/>

						<Stack
							direction="row"
							spacing={2}
							justifyContent="space-between"
						>
							<Button
								variant="contained"
								color="primary"
								type="submit"
								disabled={!isValid || isLoading}
							>
								{t("confirm")}
							</Button>
							<Button
								variant="outlined"
								color="primary"
								onClick={() => resetForm()}
								disabled={isLoading}
							>
								{t("clearForm")}
							</Button>
						</Stack>
					</Stack>
				</form>
			</Stack>
		</DialogContent>
	);
};
