"use client";

import * as React from "react";

import { Loading } from "@/components/ui/loading";
import { FadeInStagger } from "@/components/landing/fade-in";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/toaster";
import { useRouter } from "next/navigation";
import service from "@/lib/http/service";

import Image from 'next/image';
import showImage from '@/components/images/show.png';
import { useTranslation } from "react-i18next";
import md5 from "md5";

export function MixSignUp(props: {
  setError: (e: string | null) => void;
  setVerification: (b: boolean) => void;

  email: (value: string) => void;
  password: (value: string) => void;
  referrer: (value: string) => void;
  emailValue: string;
  passwordValue: string;
  referrerValue: string;
}) {

  const [isLoading, setIsLoading] = React.useState(false);
  const [showPassword, setShowPassword] = React.useState(false);
  const [showPassword2, setShowPassword2] = React.useState(false);

  const [goPassword, setGoPassword] = React.useState(false);
  const [_transferLoading, setTransferLoading] = React.useState(true);

  const router = useRouter();
  const { t } = useTranslation();

  React.useEffect(() => {
    const signUpFromParams = async () => {
      const ticket = new URL(window.location.href).searchParams.get("__clerk_ticket");
      const emailParam = new URL(window.location.href).searchParams.get("email");

      if (!ticket && !emailParam) {
        return;
      }

      if (ticket) {
        // await signUp
        //   ?.create({
        //     strategy: "ticket",
        //     ticket,
        //   })
        //   .then((result) => {
        //     if (result.status === "complete" && result.createdSessionId) {
        //       setActive({ session: result.createdSessionId }).then(() => {
        //         router.push("/app/apis");
        //       });
        //     }
        //   })
        //   .catch((err) => {
        //     setTransferLoading(false);
        //     setError((err as Error).message);
        //     console.error(err);
        //   });
      }

      if (emailParam) {
        // setVerification(true);
        // await signUp
        //   ?.create({
        //     emailAddress: emailParam,
        //   })
        //   .then(async () => {
        //     await signUp.prepareEmailAddressVerification();
        //     // set verification to true so we can show the code input
        //     setVerification(true);
        //     setTransferLoading(false);
        //   })
        //   .catch((err) => {
        //     setTransferLoading(false);
        //     if (err.errors[0].code === "form_identifier_exists") {
        //       toast.error("Sorry, it looks like you have an account. Please use sign in");
        //     } else {
        //       console.log("Supress error");
        //     }
        //   });
      }
    };
    signUpFromParams();
    setTransferLoading(false);
  }, []);

  const signUpWithOutCode = async (username: string, password: string, referrer: string) => {

    console.log("--username:", username, "--password:", password, "--referrer", referrer);

    if (
      isLoading ||
      typeof username !== "string"
    ) {
      return null;
    }
    setIsLoading(true)

    await service.post('/api/v1/customer/uregister', {
      user_name: username,
      Referral: referrer,
      password: md5(password),
    }).then(function (result: any) {
      setIsLoading(false);
      console.log("result:", result)

      if (result && result.header.code != 0) {

        toast.error(result.header.message)
        return
      }

      toast.success(result.header.message)

      router.push("/auth/sign-in");
      // 自身方法
      // localStorage.setItem("data", JSON.stringify(result.data));
      // []方法
      { {/* localStorage["name"]="bonly"; */ } }

    }).catch((err: any) => {
      setIsLoading(false);
      console.log(err);

    });


  };

  return (
    <FadeInStagger>
      {!goPassword ?
        <form className="grid gap-2" onSubmit={(e) => {
          e.preventDefault();
          const regname = new FormData(e.currentTarget).get("regname");
          const refer = new FormData(e.currentTarget).get("referreredit") || "";

          if (
            typeof regname !== "string"
          ) {
            return null;
          }      

          if (
            typeof refer !== "string"
          ) {
            return null;
          }      


          console.log("--regname:", regname, "--referrer:", refer)
          props.email(regname)
          props.referrer(refer)

          setGoPassword(true)
        }}>
        <div className="grid gap-4 mb-0">
          <div className="flex flex-col items-start gap-2">

            <label htmlFor="regname" className="text-xs text-black/50">
              {t("mixaccount")}
            </label>

            <Input
              name="regname"
              placeholder={t("auth.mixplacehoder")}
              type="text"
              defaultValue={props.emailValue}
              autoCapitalize="none"
              autoComplete="on"
              autoCorrect="off"
              required
              className="h-10 text-black duration-500 bg-transparent focus:text-black border-black/20 focus:bg-white focus:border-black rounded hover:bg-white/20 hover:border-black/40 placeholder:black/20 "
            />

            <label htmlFor="referreredit" className="text-xs text-black/50">
              {t("refcode")}
            </label>

            <Input
              name="referreredit"
              placeholder={t("auth.referrerplaceholder")}
              type="text"
              defaultValue={props.emailValue}
              autoCapitalize="none"
              autoComplete="on"
              autoCorrect="off"
              className="h-10 text-black duration-500 bg-transparent focus:text-black border-black/20 focus:bg-white focus:border-black rounded hover:bg-white/20 hover:border-black/40 placeholder:black/20 "
            />
          </div>
        </div>

          <button
            type="submit"
            className="flex items-center justify-center h-10 gap-2 px-4 mt-8 text-sm font-semibold text-white duration-200 bg-black border border-black rounded hover:border-black/30 hover:bg-black/80 hover:text-white"
            disabled={isLoading}
          >
            {t("next")}
          </button>

        </form> : <form className="grid gap-2" onSubmit={async (e) => {
          e.preventDefault();
          const password = new FormData(e.currentTarget).get("password");
          const confirmPassword = new FormData(e.currentTarget).get("confirmPassword");

          console.log("------1", props.emailValue, password, confirmPassword)

          if (typeof password !== "string" || password != confirmPassword) {
            toast.error("The two passwords you entered do not match.")
            return
          }

          await signUpWithOutCode(props.emailValue, password, props.referrerValue)

          setGoPassword(false)
        }} >

        <div className="grid gap-4 mb-4">
          <label htmlFor="password" className="text-xs text-black/50">
            {t("password")}
          </label>
          <div className="grid gap-1 relative">
            <Input
              name="password"
              placeholder={t("password")}
              type={showPassword ? "text" : "password"}
              autoCapitalize="none"
              autoComplete="email"
              autoCorrect="off"
              required
              className="h-10 rounded text-black duration-500 bg-transparent focus:text-black border-black/20 focus:bg-white focus:border-black hover:bg-white/20 hover:border-black/40 placeholder:black/20 "
            />
            <Image src={showImage} width={16} alt="show" className="absolute right-4 top-3" onClick={() => {
              setShowPassword(!showPassword)
            }} />
          </div>
        </div>

        <div className="grid gap-4 mb-4">

          <label htmlFor="password" className="text-xs text-black/50">
            {t("confirm_password")}
          </label>

          <div className="grid gap-1 relative">
            <Input
              name="confirmPassword"
              placeholder={t("confirm_password")}
              type={showPassword2 ? "text" : "password"}
              autoCapitalize="none"
              autoComplete="password"
              autoCorrect="off"
              required
              className="h-10 rounded text-black duration-500 bg-transparent focus:text-black border-black/20 focus:bg-white focus:border-black hover:bg-white/20 hover:border-black/40 placeholder:black/20 "
            />
            <Image src={showImage} width={16} alt="show" className="absolute right-4 top-3" onClick={() => {
              setShowPassword2(!showPassword2)
            }} />
          </div>

        </div>

        <button
          type="submit"
          className="flex items-center justify-center h-10 gap-2 px-4 mt-8 text-sm font-semibold text-white duration-200 bg-black border border-black rounded hover:border-black/30 hover:bg-black/80 hover:text-white"
          disabled={isLoading}
        >
          {isLoading ? <Loading className="w-4 h-4 animate-spin" /> : "Next"}
        </button>

        </form>}

    </FadeInStagger>
  );
};