"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 validateIranPhone from "plugins/IranPhoneRegex";
import React, { useContext, useState } from "react";
import { toast } from "react-toastify";

const LoginStep = (props) => {
  const [roleCheckBox, setRoleCheckBox] = useState(false);
  const [alertRolCheckBox, setAlertRolCheckBox] = useState(false);
  const CTX = useContext(AppContext);
  const phoneNumber = CTX.state.phoneNumber;

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

  const handleConfirmPhoneNumber = () => {
    setAlertRolCheckBox(false);

    if (validateIranPhone(phoneNumber) && roleCheckBox) {
      CTX.ConfirmPhoneNumber(phoneNumber);
    } else {
      if (!validateIranPhone(phoneNumber)) {
        toast.error("  شماره تماس را درست وارد کنید ", {
          position: "bottom-right",
          closeOnClick: true,
        });
      } else if (!roleCheckBox) {
        toast.error(`برای ورود تایید قوانین الزامی است`, {
          position: "bottom-right",
          closeOnClick: true,
        });

        setTimeout(() => {
          setAlertRolCheckBox(true);
        }, 100);
      }
    }
  };

  return (
    <div className="px-5 mt-20">
      {/* <p className="mb-0 text-textMain-100 mt-1 text-right text-sm">
        {" "}
        برای ورود یا ثبت نام باید شماره تلفن همراه خود را وارد کنید
      </p> */}

      <div className="mt-3">
        <Input
          lable={t("loginInput")}
          theme={1}
          id="phoneNumber-id"
          name="phoneNumber"
          type={"number"}
          inputEvent={(e) => CTX.setPhoneNumber(e.target.value)}
          mt={5}
        />
      </div>

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

      <div
        className={`flex  mt-4 tr03 border-[2px] border-transparent py-2   ${
          alertRolCheckBox ? "animate-pulse-1 " : ""
        } ${isRTL ? "rtl" : "ltr"}`}
      >
        <div>
          <input
            type="checkbox"
            checked={roleCheckBox ? true : false}
            defaultValue={roleCheckBox}
            className="w-[35px] h-[10px] !rounded-xl mx-2 custom-checkbox mt-1 "
            name="hasSchengenRelative"
            onClick={(e) => setRoleCheckBox(e.target.checked)}
          />
        </div>
        <p
          className={`mb-0 text-white mt-1  text-sm ${
            isRTL ? "text-right" : "text-left"
          }`}
        >
          {t("acceptRule")}
        </p>
      </div>
    </div>
  );
};

export default LoginStep;