"use client";

import AppContext from "@ctx/AppContext";
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 handleConfirmPhoneNumber = () => {
    setAlertRolCheckBox(false);

    if (validateIranPhone(phoneNumber) && roleCheckBox) {
      CTX.ConfirmPhoneNumber(phoneNumber);
    } else {
      if (!validateIranPhone(phoneNumber)) {
        toast.error("  شماره تماس را درست وارد کنید ", {
          position: "bottom-right",
          closeOnClick: true,
        });
      } else if (!roleCheckBox) {
        setTimeout(() => {
          setAlertRolCheckBox(true);
        }, 100);
      }
    }
  };

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

      <div className="mt-3">
        <Input
          lable="شماره تلفن خود را وارد کنید"
          id="phoneNumber-id"
          name="phoneNumber"
          type={"number"}
          inputEvent={(e) => CTX.setPhoneNumber(e.target.value)}
        />
      </div>

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

      <div
        className={`flex rtl mt-4 tr03 border-[2px] border-transparent py-2   ${
          alertRolCheckBox ? "animate-pulse-1 " : ""
        }`}
      >
        <div>
          <input
            type="checkbox"
            checked={roleCheckBox ? true : false}
            defaultValue={roleCheckBox}
            className="w-[40px] h-[40px] !rounded-xl mx-2 custom-checkbox mt-1"
            name="hasSchengenRelative"
            onClick={(e) => setRoleCheckBox(e.target.checked)}
          />
        </div>
        <p className={`mb-0 text-textMain-100 mt-1 text-right text-sm `}>
          با تایید شماره تلفن همراه با همه شرایط حریم خصوص اپلیکیشن مدیریت توک
          موافقت می کنم
        </p>
      </div>
    </div>
  );
};

export default LoginStep;