"use client";
import { UseMutate } from "@/hooks/UseMutate";
import UseSession from "@/hooks/UseSession";
import { Switch } from "@/shared/ui/switch";
import { useEffect, useState } from "react";
import ShowAlertMixin from "@/shared/ShowAlertMixin";
import { useTranslations } from "next-intl";

export default function ToggleNotifications() {
  const t = useTranslations();
  const session = UseSession();
  const [checked, setChecked] = useState<any>(
    session?.settings?.allow_notifications,
  );
  useEffect(() => {
    setChecked(session?.settings?.allow_notifications);
  }, [session]);
  const { mutate, isLoading } = UseMutate({
    endpoint: "client/profile/settings",
    onSuccess: (responseData: any) => {
      ShowAlertMixin({
        icon: "success",
        title:
          +!checked == 1
            ? t("Messages.successEnableNotifications")
            : t("Messages.successDisableNotifications"),
      });
      setChecked(!checked);
    },
    method: "PUT",
  });
  return (
    <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white p-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="w-12 h-12 bg-warning/20 rounded-lg flex items-center justify-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-bell text-warning"
            >
              <path d="M10.268 21a2 2 0 0 0 3.464 0"></path>
              <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path>
            </svg>
          </div>
          <div>
            <h3 className="mb-1"> {t("NAV.notifications")}</h3>
            <p className="text-sm text-text-secondary">
              {t("Text.toggle_notifications")}
            </p>
          </div>
        </div>
        <Switch
          checked={checked}
          onCheckedChange={() => mutate({ allow_notifications: +!checked })}
          disabled={isLoading}
        />
      </div>
    </div>
  );
}