import { RoomPreferencesOutlined } from "@mui/icons-material";
import { Typography } from "@mui/material";
import { HttpStatusCode } from "axios";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import { toast } from "react-toastify";
import { z } from "zod";

import { Card, ErrorContext } from "@/common/components/card/Card";
import { CardField } from "@/common/components/card/CardField";
import { MAX_NAME_LENGTH, MAX_TEXT_LENGTH } from "@/constants";
import { AreaModel } from "@/contracts/client.schemas";

const fields: CardField<AreaModel>[] = [
	{
		name: "index",
		title: "Index",
		type: "number",
		required: true,
	},
	{
		name: "name",
		title: "Name",
		required: true,
	},
	{
		name: "description",
		title: "Description",
		type: "multiline",
		required: true,
	},
];

const validationSchema = z.object({
	index: z
		.number({
			required_error: "Index is required",
			invalid_type_error: "Index must be a number",
		})
		.min(0, "Index must be greater than or equal to 0")
		.max(255, "Index must be less than or equal to 255"),

	name: z
		.string({
			required_error: "Name is required",
			invalid_type_error: "Name must be a string",
		})
		.min(3, "Name must be at least 3 characters")
		.max(
			MAX_NAME_LENGTH,
			`Name must be less than ${MAX_NAME_LENGTH} characters`,
		),

	description: z
		.string({
			required_error: "Description is required",
			invalid_type_error: "Description must be a string",
		})
		.min(3, "Description must be at least 3 characters")
		.max(
			MAX_TEXT_LENGTH,
			`Description must be less than ${MAX_TEXT_LENGTH} characters`,
		),
});

export const AreaCardPage = () => {
	const { assetId } = useParams();
	const navigate = useNavigate();
	const { t } = useTranslation();

	if (!assetId) {
		throw new Error("assetId is required");
	}

	const defaultValue: AreaModel = {
		id: "",
		name: "",
		description: "",
		index: 0,
		assetId,
		hasAlarms: false,
		hasFaults: false,
	};

	const extraTitle = (model: AreaModel) => {
		return <Typography>{model.name}</Typography>;
	};

	const handleError = (error: ErrorContext) => {
		if (error.status === HttpStatusCode.Conflict) {
			toast.error(
				t("The same area with the same index is already in the system"),
			);
			return true;
		}

		return false;
	};

	const extraActions = [
		{
			icon: <RoomPreferencesOutlined />,
			title: "Zones",
			action: async (model: AreaModel) => {
				navigate("./zones", { relative: "path" });

				return model;
			},
		},
	];

	return (
		<Card
			defaultValue={defaultValue}
			fields={fields}
			baseUrl="/api/areas"
			createTitle="Добавление раздела"
			editTitle="Редактирование раздела"
			viewTitle="Карточка раздела"
			validationSchema={validationSchema}
			extraTitle={extraTitle}
			onError={handleError}
			notificationMethodPrefix="AREAS"
			getModelTitle={(x) => x.name}
			filters={{
				assetId,
			}}
			canEdit={true}
			canRemove={true}
			extraActions={extraActions}
		/>
	);
};
