"use client"
import { doCredentialLogin } from "@/app/actions/authenticationActions"
import Input from "@/components/ui/Input"
import MainButton from "@/components/ui/MainButton"
import PasswordInput from "@/components/ui/PasswordInput"
import { Form } from "@/components/ui/form"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import { useToast } from "@/components/ui/use-toast"
import useCurrentLanguage from "@/hooks/useCurrentLanguage"
import useFcmToken from "@/hooks/useFCMToken"
import { AuthFormState } from "@/modules/authentication/authFormState"
import { zodResolver } from "@hookform/resolvers/zod"
import { Loader } from "lucide-react"
import { useState } from "react"
import { useForm } from "react-hook-form"
import { z } from "zod"

type Props = {
  setFormState: React.Dispatch<React.SetStateAction<AuthFormState>>
  setOpen: React.Dispatch<React.SetStateAction<boolean>>
}

const LoginForm = ({ setFormState, setOpen }: Props) => {
  const [loading, setLoading] = useState(false)
  const { toast } = useToast()
  const { locale } = useCurrentLanguage()
  const { fcmToken, notificationPermissionStatus } = useFcmToken()

  const formSchema = z.object({
    phone: z
      .string()
      .min(9, { message: locale?.["invalid_mobile_number"] })
      .max(14, { message: locale?.["invalid_mobile_number"] })
      .refine(
        (val) => {
          return !isNaN(Number(val))
        },
        { message: locale?.["invalid_mobile_number"] }
      ),
    password: z.string().min(8, {
      message: locale?.["String_must_contain_at_least_8_character(s)"],
    }),
  })

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      phone: "",
      password: "",
    },
  })

  async function onSubmit(values: z.infer<typeof formSchema>) {
    setLoading(true)

    const valuesWithDeviceToken = fcmToken ? { ...values, deviceToken: fcmToken } : values
    try {
      await doCredentialLogin(valuesWithDeviceToken)
      setLoading(false)
      setOpen(false)
      toast({
        className: "bg-green-700 text-white rounded-xl",
        description: locale?.["signed_in_successfully"],
      })
    } catch (error) {
      setLoading(false)
      toast({
        variant: "destructive",
        title: locale?.["invalid_data"],
        description: locale?.["wrong_phone_number_or_password"],
        className: "bg-red-700 text-white rounded-xl",
      })
    }

    // values.phone = values.phone.replace(/^0/, "+966");
    // if (fcmToken) {
    //   //  @ts-ignore
    //   const valuesWithDeviceToken= {...values, deviceToken: fcmToken}
    //   console.log("values for login", valuesWithDeviceToken);
    //   setLoading(true)
    //   try {
    //     console.log("ar y try ?")
    //     console.log("values for login for doCredentialLogin", valuesWithDeviceToken);
    //     await doCredentialLogin(valuesWithDeviceToken)
    //     console.log("ar y try 2 ?")
    //     setLoading(false)
    //     setOpen(false)
    //     toast({
    //       className: "bg-green-700 text-white rounded-xl",
    //       description: locale?.["signed_in_successfully"],
    //     })
    //   } catch (error) {
    //     console.log("eeeeeeeeeeeeror",error.message)
    //     setLoading(false)
    //     toast({
    //       variant: "destructive",
    //       title: locale?.["invalid_data"],
    //       description: locale?.["wrong_phone_number_or_password"],
    //       className: "bg-red-700 text-white rounded-xl",
    //     })
    //   }

    // } else {
    //   toast({
    //     title: locale?.["invalid_data"],
    //     description: locale?.["fcmToken_is_required"],
    //     className: "bg-red-700 text-white rounded-xl",
    //   });
    //   console.log("no device token (fcmToken). fcmToken is required");
    // }
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 capitalize">
        <Input form={form} placeholder="phone" name="phone" label="phone" type="number" />
        <PasswordInput form={form} />
        <button type="button" className="text-mainGray flex mr-auto !mb-8" onClick={() => setFormState("forgetPass")}>
          <TranslateClient text="forget_password" />
        </button>
        <MainButton
          type="submit"
          size="sm"
          disabled={loading}
          intent={loading ? "loading" : "primary"}
          fullWidth
          className="gap-5"
        >
          {loading && <Loader className="w-5 h-5 animate-spin" />}
          <TranslateClient text="login" />
        </MainButton>
        <div className="text-center">
          <span>
            <TranslateClient text="do_not_have_account" />
          </span>
          <button type="button" className="text-mainBlue mx-2" onClick={() => setFormState("signup")}>
            <TranslateClient text="signup" />
          </button>
        </div>
      </form>
    </Form>
  )
}

export default LoginForm