"use client";

// import { useSignUp } from "@clerk/nextjs";
import { useRouter } from "next/navigation";
import * as React from "react";

import { Loading } from "@/components/ui/loading";
import { toast } from "@/components/ui/toaster";
import { cn } from "@/lib/utils";
import { OTPInput, SlotProps } from "input-otp";
import service from "@/lib/http/service";
import md5 from "md5";
import { useTranslation } from "react-i18next";
// import { Minus } from "lucide-react";

type Props = {
  setError: (e: string) => void;
  emailValue: string;
  passwordValue: string;
};

export const EmailCode: React.FC<Props> = ({ setError, emailValue, passwordValue }) => {
  const router = useRouter();
  const { t } = useTranslation();

  const [isLoading, setIsLoading] = React.useState(false);
  const [_timeLeft, _setTimeLeft] = React.useState(0);

  const verifyCode = async (otp: string) => {

    console.log("verifyCode", otp, passwordValue,
    )
    setIsLoading(true);


    await service.post('/api/v1/customer/register', {
      user_name: emailValue,
      email: emailValue,
      password: md5(passwordValue),
      reg_code: otp,

    }).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);

    });
  };

  
  const resendCode = async () => {
    console.log("resendCode", emailValue)
    try {
      await service.post('/api/v1/common/auth-code', {
        user_name: emailValue,
        email: emailValue,

      }).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)

      }).catch((err: any) => {
        setIsLoading(false);
        console.log(err);
      });
    } catch (error) {
      setIsLoading(false);
      setError((error as Error).message);
      console.error(error);
    }
  };
  const [otp, setOtp] = React.useState("");
  return (
    <div className="flex flex-col max-w-sm mx-auto text-left">
      <h1 className="text-4xl text-transparent bg-clip-text bg-gradient-to-r from-black to-black mb-10">
        {t("auth.sign_up")}
      </h1>
      <p className="mb-1 text-sm text-[#666666]">
        {t("auth.verification_code")}
      </p>

      <form className="flex flex-col gap-12 mb-2" onSubmit={() => verifyCode(otp)}>
        <OTPInput
          data-1p-ignore
          value={otp}
          onChange={setOtp}
          onComplete={() => verifyCode(otp)}
          maxLength={6}
          render={({ slots }) => (
            <div className="flex items-center justify-between">
              {slots.slice(0, 3).map((slot, idx) => (
                <Slot key={idx} {...slot} />
              ))}
              {slots.slice(3).map((slot, idx) => (
                <Slot key={idx} {...slot} />
              ))}
            </div>
          )}
        />
      </form>

      <p className="mt-2 text-sm text-right text-black/40">
        <button type="button" className=" text-black underline" onClick={resendCode}>
          {t("auth.send_again")}
        </button>
      </p>
    </div>
  );
};

const Slot: React.FC<SlotProps> = (props) => (
  <div
    // text-[2rem]
    className={cn(
      "relative w-12 h-12  border border-black/20 rounded text-black font-light text-base",
      "flex items-center justify-center",
      "transition-all duration-300",
      "group-hover:border-black/50 group-focus-within:border-black/50",
      "outline outline-0 outline-black",
      { "outline-1 ": props.isActive },
    )}
  >
    {props.char !== null && <div>{props.char}</div>}
  </div>
);