"use client";

import AppContext from "@ctx/AppContext";
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 handleSendVerify = () => {
    if (verifyCode.length <= 5) {
      toast.error(" کد را صحیح وارد کنید  ", {
        position: "bottom-right",
        closeOnClick: true,
      });
    } else {
      CTX.LoginWhitVerifyCode();
    }
  };

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

      <div className="mt-3">
        <Input
          lable="کد ارسال شده را وارد کنید"
          id="verifyCode-id"
          name="verifyCode"
          type={"number"}
          style="text-center"
          inputEvent={(e) => CTX.setVerifyCode(e.target.value)}
          mt={5}
          theme={1}
        />
      </div>

      <Buttonbriz
        title="تایید شماره تلفن"
        color="SECONDARY"
        icon="PHONE"
        buttonEvent={() => handleSendVerify()}
      />
    </div>
  );
};

export default VerifyCodeStep;