"use client";
import React from "react";
import {useForm, SubmitHandler, Controller} from "react-hook-form";
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import Title from "@/components/Title";
import translation from "@/translation/contactus.json";
import Image from "next/image";
import {toast, ToastContainer} from "react-toastify";
import ContactPage from "@/types/cms/contact";

type FormValues = {
	name: string;
	email: string;
	description: string;
	subject: string;
	type: "feedback" | "bug" | "help" | "";
};

interface Props {
	language: "en" | "ar";
	data: ContactPage;
	page: string;
}

const ErrorMessage = ({message}: {message: string}) => (
	<div className="w-full">
		<span className="text-mti-red">{message}</span>
	</div>
);
export default function App({language, data, page}: Props) {
	const selectOptions = [
		{
			label: data.Feedback,
			value: "feedback",
		},
		{
			label: data.Bug,
			value: "bug",
		},
		{
			label: data.Help,
			value: "help",
		},
	];

	const {register, control, handleSubmit, formState} = useForm<FormValues>({
		defaultValues: {
			name: "",
			email: "",
			description: "",
			subject: "",
			type: "",
		},
	});

	const {errors, isDirty, isValid} = formState;
	const onSubmit: SubmitHandler<FormValues> = async (body) => {
		try {
			const response = await fetch(`https://platform.encoach.com/api/tickets`, {
				method: "POST",
				headers: {
					"Content-Type": "application/json",
				},
				body: JSON.stringify({
					reporter: {
						name: body.name,
						email: body.email,
					},
					subject: body.subject,
					type: body.type,
					reportedFrom: window?.location.toString() || "",
					status: "submitted",
					date: new Date().toISOString(),
					description: body.description,
				}),
			});

			if (response.status === 200) {
				const body = await response.json();
				// Pass data to the page via props
				if (body.ok) {
					toast.success(data.TicketSuccess);
					return;
				}
			}
		} catch (err) {}

		toast.error(data.TicketError);
	};

	return (
		<>
			<ToastContainer />
			<main className="text-mti-black flex h-screen w-full flex-col bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
				<Navbar currentPage={page} language={language} />
				<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
					<div className="w-full h-full flex flex-col items-center justify-center">
						<Title>{data.Title}</Title>
					</div>
				</section>
				<section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
					<form onSubmit={handleSubmit(onSubmit)} className="form-control items-center gap-2 text-mti-black flex flex-col w-96">
						<input
							id="name"
							type="text"
							placeholder={data.Name}
							{...register("name", {required: true})}
							className="input input-bordered md:w-full sm:w-1/2  max-w-md"
						/>
						{errors.name && errors.name.type === "required" && <ErrorMessage message={data.FieldRequired} />}
						<input
							id="email"
							placeholder={data.Email}
							type="text"
							{...register("email", {required: true, pattern: /^\S+@\S+$/i})}
							className="input input-bordered md:w-full sm:w-1/2  max-w-md"
						/>
						{errors.email && errors.email.type === "required" && <ErrorMessage message={data.FieldRequired} />}
						{errors.email && errors.email.type === "pattern" && <ErrorMessage message={data.InvalidEmail} />}
						<input
							id="subject"
							placeholder={data.Subject}
							type="text"
							{...register("subject", {required: true})}
							className="input input-bordered md:w-full sm:w-1/2 max-w-md"
						/>
						{errors.subject && errors.subject.type === "required" && <ErrorMessage message={data.FieldRequired} />}
						<select id="type" {...register("type", {required: true})} className="select select-bordered md:w-full sm:w-1/2 max-w-md">
							<option value="" disabled>
								{data.SelectType}
							</option>
							{selectOptions.map((option) => (
								<option key={option.value} value={option.value}>
									{option.label}
								</option>
							))}
						</select>
						{errors.type && errors.type.type === "required" && <ErrorMessage message={data.FieldRequired} />}
						<textarea
							id="description"
							placeholder={data.Description}
							{...register("description", {required: true})}
							className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md"
							rows={5}
						/>
						{errors.description && errors.description.type === "required" && <ErrorMessage message={data.FieldRequired} />}
						<input type="submit" className="btn" disabled={!isDirty || !isValid} value={data.Submit} />
					</form>
					<div className="flex flex-col">
						<Image src="/person_laptop_focus.jpg" alt="Contact Us" width={500} height={340} className="rounded-xl" />
					</div>
				</section>
				<Footer language={language} />
			</main>
		</>
	);
}
