"use client";

import { doCredentialLogin } from "@/app/actions/authenticationActions";
import register from "@/app/api-requests/signupRequest";
import Input from "@/components/ui/Input";
import MainButton from "@/components/ui/MainButton";
import PasswordInput from "@/components/ui/PasswordInput";
import { Checkbox } from "@/components/ui/checkbox";
import { Form } from "@/components/ui/form";
import LangLink from "@/components/ui/localization/LangLink";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import { toast } 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 { CheckedState } from "@radix-ui/react-checkbox";
import { SquareArrowUpRight } from "lucide-react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Loader } from "lucide-react";

type Props = {
  setFormState: React.Dispatch<React.SetStateAction<AuthFormState>>;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
};
type AuthValues = {
  phone: string;
  password: string;
};

const SignupForm = ({ setFormState, setOpen }: Props) => {
  const { locale } = useCurrentLanguage();
  const { fcmToken, notificationPermissionStatus } = useFcmToken();
  const formSchema = z.object({
    username: z.string().min(3, {
      message: locale?.["String_must_contain_at_least_3_character(s)"],
    }),
    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 [checked, setChecked] = useState<CheckedState>(false);
  const [checkedErr, setCheckedErr] = useState<CheckedState>(false);
  const [authValues, setAuthValues] = useState<AuthValues>({
    password: "",
    phone: "",
  });
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
      phone: "",
      password: "",
    },
  });
  const { data, mutate, isLoading } = register();
  function onSubmit(values: z.infer<typeof formSchema>) {
    if (!checked) {
      setCheckedErr(true);
      return;
    }

    //  @ts-ignore
    const valuesWithDeviceToken = fcmToken
      ? { ...values, deviceToken: fcmToken }
      : values;
    mutate(valuesWithDeviceToken);

    // if (fcmToken) {
    //   //  @ts-ignore
    //   values["deviceToken"] = fcmToken;
    //   const valuesWithDeviceToken= {...values, deviceToken: fcmToken}
    //   console.log("values for register ??", valuesWithDeviceToken);
    //   mutate(valuesWithDeviceToken);
    // } 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");
    // }
    // we dont need deviceToken in authValues
    // @ts-ignore
    delete values.deviceToken;
    setAuthValues(values);
  }
  async function LoginAfterSignup() {
    const valuesWithDeviceToken = fcmToken
      ? { ...authValues, deviceToken: fcmToken }
      : authValues;
    const ccc = await doCredentialLogin(valuesWithDeviceToken);
    setOpen(false);
  }
  useEffect(() => {
    if (!!data?.errors) {
      return;
    }
    if (data) {
      toast({
        title: "success",
        description: locale?.["signed_up_successfully"],
        className: "bg-green-700 text-white rounded-xl",
      });
      LoginAfterSignup();
    }
  }, [data]);

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="space-y-4 capitalize"
      >
        <Input
          form={form}
          placeholder="username"
          name="username"
          label="username"
        />
        <Input form={form} placeholder="phone" name="phone" label="phone" />
        <PasswordInput form={form} />
        <div
          className={`flex gap-x-2 items-center text-mainGray ps-1 !mb-4 ${
            checkedErr && "text-red-500"
          }`}
        >
          <Checkbox
            id="terms_conditions"
            className="block data-[state=checked]:bg-mainBlue data-[state=checked]:border-none data-[state=checked]:text-white rounded"
            onCheckedChange={(state) => {
              setChecked(state as CheckedState);
              setCheckedErr(!state);
            }}
          />
          <label htmlFor="terms_conditions" className="text-sm">
            <TranslateClient text="accept_terms_conditions" />
          </label>
          <LangLink href="terms">
            <SquareArrowUpRight
              size={15}
              className="text-mainBlue"
              onClick={() => setOpen(false)}
            />
          </LangLink>
        </div>
        <MainButton
          intent={isLoading ? "loading" : "primary"}
          type="submit"
          size="sm"
          fullWidth
          disabled={isLoading}
          className="gap-5"
        >
          {isLoading && <Loader className="w-5 h-5 animate-spin" />}
          <TranslateClient text="create_account" />
        </MainButton>
        <div className="text-center">
          <span>
            <TranslateClient text="do_you_have_account" />
          </span>

          <button
            type="button"
            className="text-mainBlue mx-2"
            onClick={() => setFormState("login")}
          >
            <TranslateClient text="login" />
          </button>
        </div>
      </form>
    </Form>
  );
};

export default SignupForm;