import { Button, Input } from "antd";
import styles from "./otpVerification.module.scss";
import cx from "classnames";
import { FC, useState, useEffect } from "react";
import ChangeFieldPage from "../changeField/changeFieldPage";
import * as getOtp from "../../../../pages/api/opt";

const OtpVerification: FC<any> = ({ newData, params,newPhone,oldEmail,oldPhone }) => {
  console.log(newData);
  const [rechange, setRechange] = useState(false);
  const [otpField, setOtpField] = useState(null);
  const rechangeHandler = () => {
    setRechange(true);
  };
  const otpOnChangeHandler = (e: any) => {
    setOtpField(e.target.value);
  };
  const verifyOptOnClick = () => {
    const v = {
      email: newData,
      ...params,
    };
    getOtp.verifyOtp({ phone: 9182179736, otp: otpField }).then((data) => {});
  };
  useEffect(() => {
    // getOtp.getOpt({ phone: 9182179736 });
  }, []);

  if (!rechange) {
    return (
      <div className={styles.otpContainer}>
        <h1>Verfication Required</h1>
        <div className={cx("ant-row")}>
          <div className="ant-col-5 ant-col-md-7  ant-col-xs-24">
            {newPhone===""?newData:newPhone}
          </div>
          <div className="ant-col-xl-4 ant-col-xs-24">
            {" "}
            <span onClick={rechangeHandler} className={styles.spanColor} >
              change
            </span>
          </div>
        </div>
        <div>
          An {newPhone===""?"email":"phone"} with a One time Password (OTP) has been sent to the {newPhone===""?"email":"phone"}
          shown above. Please enter it below.
        </div>
        <h4>Enter OTP</h4>
        <div className="ant-row">
          <div className="ant-col-xl-9 mt-1 mb-9">
            <Input onChange={otpOnChangeHandler} placeholder="Enter OTP"/>
          </div>
        </div>

        <Button onClick={verifyOptOnClick} type="primary">Continue</Button>
      </div>
    );
  } else {
    return <ChangeFieldPage phone={oldPhone} email={oldEmail}/>;
  }
};
export default OtpVerification;