import React from "react";
import _Ux from "@/layouts/_Ux";
import { useForm } from "@inertiajs/react";
import Can from "@/constants/Can";

export default function Notification({ data: OldData }) {
    const { data, setData, post, processing, errors } = useForm({
        hotel_approve_email: OldData?.hotel_approve_email || "active",
        hotel_reject_email: OldData?.hotel_reject_email || "active",
        agent_approve_email: OldData?.agent_approve_email || "active",
        agent_reject_email: OldData?.agent_reject_email || "active",
        tour_booking_email: OldData?.tour_booking_email || "active",
    });

    const handelSubmit = (e) => {
        e.preventDefault();
        post(route("ux.notification.setting.store"));
    };

    return (
        <_Ux
            title="Notification"
            main_title="Notification"
            breadcrumb={["Home", "", "Settings", "", "Notification"]}
        >
            <div className="bg-white rounded-md p-5 space-y-5 md:max-w-200">
                <div className="w-full flex items-center justify-between gap-5 md:gap-10 border-b border-gray-200 pb-5">
                    <div>
                        <h3 className="font-semibold text-neutral">
                            Hotel Approval Email
                        </h3>
                        <p className="text-sm text-gray-600">
                            Automatically send an email notification to the
                            hotel owner when their property listing is approved
                            and published.
                        </p>
                    </div>
                    <input
                        type="checkbox"
                        checked={
                            data?.hotel_approve_email == "active" ? true : false
                        }
                        onChange={(e) =>
                            setData(
                                "hotel_approve_email",
                                e.target.checked ? "active" : "inactive",
                            )
                        }
                        className="toggle"
                    />
                </div>
                <div className="w-full flex items-center justify-between gap-5 md:gap-10 border-b border-gray-200 pb-5">
                    <div>
                        <h3 className="font-semibold text-neutral">
                            Hotel Reject Email
                        </h3>
                        <p className="text-sm text-gray-600">
                            Automatically send an email notification to the
                            hotel owner when their property listing is rejected,
                            including any relevant reason or required actions.
                        </p>
                    </div>
                    <input
                        type="checkbox"
                        checked={
                            data?.hotel_reject_email == "active" ? true : false
                        }
                        onChange={(e) =>
                            setData(
                                "hotel_reject_email",
                                e.target.checked ? "active" : "inactive",
                            )
                        }
                        className="toggle"
                    />
                </div>
                <div className="w-full flex items-center justify-between gap-5 md:gap-10 border-b border-gray-200 pb-5">
                    <div>
                        <h3 className="font-semibold text-neutral">
                            Agent Approval Email
                        </h3>
                        <p className="text-sm text-gray-600">
                            Automatically send an email notification when an
                            agent account is approved and activated, allowing
                            access to the agent dashboard and services.
                        </p>
                    </div>
                    <input
                        type="checkbox"
                        checked={
                            data?.agent_approve_email == "active" ? true : false
                        }
                        onChange={(e) =>
                            setData(
                                "agent_approve_email",
                                e.target.checked ? "active" : "inactive",
                            )
                        }
                        className="toggle"
                    />
                </div>
                <div className="w-full flex items-center justify-between gap-5 md:gap-10 border-b border-gray-200 pb-5">
                    <div>
                        <h3 className="font-semibold text-neutral">
                            Agent Reject Email
                        </h3>
                        <p className="text-sm text-gray-600">
                            Automatically send an email notification when an
                            agent registration request is rejected, including
                            the reason and any steps required for resubmission.
                        </p>
                    </div>
                    <input
                        type="checkbox"
                        checked={
                            data?.agent_reject_email == "active" ? true : false
                        }
                        onChange={(e) =>
                            setData(
                                "agent_reject_email",
                                e.target.checked ? "active" : "inactive",
                            )
                        }
                        className="toggle"
                    />
                </div>
                <div className="w-full flex items-center justify-between gap-5 md:gap-10 border-b border-gray-200 pb-5">
                    <div>
                        <h3 className="font-semibold text-neutral">
                            Tour booking Email
                        </h3>
                        <p className="text-sm text-gray-600">
                            Automatically send a confirmation email when a tour
                            booking is successfully placed, including booking
                            details, schedule, and payment information.
                        </p>
                    </div>
                    <input
                        type="checkbox"
                        checked={
                            data?.tour_booking_email == "active" ? true : false
                        }
                        onChange={(e) =>
                            setData(
                                "tour_booking_email",
                                e.target.checked ? "active" : "inactive",
                            )
                        }
                        className="toggle"
                    />
                </div>
                {Can("notification.setting.update") && (
                    <button
                        className="btn btn-primary btn-wide"
                        onClick={handelSubmit}
                        disabled={processing}
                    >
                        Save now
                    </button>
                )}
            </div>
        </_Ux>
    );
}