import { Button, Input } from "antd";
import styles from "./changeField.module.scss";
import cx from "classnames";
import { FC, useState } from "react";
import OtpVerification from "../otpVerification/otpVerification";
import MyProfileForm from "../myProfileForm";

const ChangeFieldPage: FC<any> = ({ params,phone,email }) => {
 
  const [changeData, setChangeData] = useState("");
  const [changePhone, setChangePhone] = useState("");
  const [changeOtp, setChangeOtp] = useState(false);
  const [cancel, setCancel] = useState(false);
  const cancelHandler = () => {
    setCancel(true);
  };

  const onFieldChangeHandler = (e: any) => {
    // console.log(e);
    setChangeData(e.target.value);
  };
  const changePhoneHandler=(e:any)=>{
    setChangePhone(e.target.value);
  }
  const changeOtpHandler = () => {
    setChangeOtp(true);
  };
  return (
    <div>
      {!changeOtp && !cancel ? (
        <PageData
          onFieldChangeHandler={onFieldChangeHandler}
          changeData={changeData}
          changeOtpHandler={changeOtpHandler}
          cancelHandler={cancelHandler}
          changePhoneHandler={changePhoneHandler}
          changePhone={changePhone}
          email={email}
          phone={phone}
        />
      ) : changeOtp ? (
        <OtpVerification newData={changeData} params={params} newPhone={changePhone} oldEmail={email} oldPhone={phone}/>
      ) : (
        <MyProfileForm />
      )}
    </div>
  );
};

const PageData: FC<any> = ({
  onFieldChangeHandler,
  changeData,
  changeOtpHandler,
  cancelHandler,
  email,
  changePhoneHandler,
  changePhone,
  phone
}) => {
  return (
    <div className={styles.changeFieldContainer}>
      <h1 className={styles.titleText}>Change Your {phone===""?"Email Address":"Phone Number"}</h1>
      {phone===""?<div>
        current email address{" "}
        <span style={{ fontWeight: "600" }}>{email}</span>
      </div>:<div>
        current Phone Number{" "}
        <span style={{ fontWeight: "600" }}>{phone}</span>
      </div>}
      <div>
        Enter the new {phone===""?"email address":"Phone Number"} you would like to associte with your account
        below. We will send a One Time Password (OTP) to that {phone===""?"address":"phone"}{" "}
      </div>
      <div>
        <h3>{phone===""?"New Email Address":"New Phone Number"}</h3>
        <div className={cx(styles.fieldContainer, "ant-row")}>
          <div className="ant-col-xl-10 ant-col-md-12 ant-col-sm-16 ant-col-xs-24">
            {phone===""?<Input onChange={onFieldChangeHandler} value={changeData} />:<Input onChange={changePhoneHandler} value={changePhone} />}
          </div>
        </div>
        <div className="ant-row">
          <div className="ant-col-xl-10 ant-col-md-12 ant-col-sm-16 ant-col-xs-24">
            <Button
              className={styles.purpleButtonStyle}
              onClick={changeOtpHandler}
              type="primary"
            >
              Continue
            </Button>
            <Button onClick={cancelHandler} style={{ height: "36px",padding:"0 1.75rem"}}>Cancel</Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ChangeFieldPage;