"use client";

import AppContext from "@ctx/AppContext";
import { useLocale, useTranslations } from "next-intl";
import Buttonbriz from "plugins/Buttonbriz/page";
import Input from "plugins/Input/page";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext } from "react";

const VerifyCodeStep = () => {
  const CTX = useContext(AppContext);
  const phoneNumber = CTX.state.phoneNumber;
  const verifyCode = CTX.state.verifyCode;

  const t = useTranslations("login");
  const locale = useLocale();
  const isRTL = locale === "fa";

  const handleSendVerify = () => {
    if (verifyCode.length <= 5) {
      toast.error(" کد را صحیح وارد کنید  ", {
        position: "bottom-right",
        closeOnClick: true,
      });
    } else {
      CTX.LoginWhitVerifyCode();
    }
  };

  return (
    <div className="px-5 mt-6">
      {isRTL ? (
        <p className="mb-0 text-white mt-1 text-right text-sm">
          کد تایید برای شماره
          <strong className="mx-1">
            <PersianNumber number={phoneNumber} />
          </strong>
          ارسال شده است
        </p>
      ) : (
        <p className="mb-0 text-white mt-1 text-center text-sm">
          {t("confirmText")}{" "}
        </p>
      )}

      <div className="mt-3">
        <Input
          lable={t("confirmInput")}
          id="verifyCode-id"
          name="verifyCode"
          type={"number"}
          style="text-center"
          inputEvent={(e) => CTX.setVerifyCode(e.target.value)}
          mt={5}
          theme={1}
        />
      </div>

      <Buttonbriz
        title={t("loginButton")}
        color="SECONDARY"
        icon="PHONE"
        buttonEvent={() => handleSendVerify()}
      />
    </div>
  );
};

export default VerifyCodeStep;