import { useEffect, useState, } from 'react';

// material-ui
import {
    Button,
    FormHelperText,
    Grid, IconButton,
    InputLabel, OutlinedInput,
    Stack,
    Typography,
    FormGroup,
    TextField,
    Checkbox
    // MenuItem
} from '@mui/material';
import { useForm, } from 'react-hook-form'
import Autocomplete from "@mui/material/Autocomplete";

// third party
import { useFormik, FormikProvider } from 'formik';
import * as yup from 'yup';

import axios from "axios";
import { POST_IAMSMART_USER_REGISTER, POST_CAPTCHA, GET_USER_EMAIL } from "utils/ApiPathConst";

import * as ComboData from "utils/ComboData";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));

import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';

import { Link } from 'react-router-dom';
import * as HttpUtils from "../../../utils/HttpUtils";
import LoopIcon from '@mui/icons-material/Loop';
import { useTheme } from '@mui/material/styles';
import { useLocation } from "react-router-dom";
import { FormattedMessage, useIntl } from "react-intl";

// ============================|| FIREBASE - REGISTER ||============================ //

const CustomFormWizard = (props) => {
    const location = useLocation();
    const theme = useTheme();
    const intl = useIntl();

    const [iAmSmartData, setIAmSmartData] = useState({});

    const [checkUpload, setCheckUpload] = useState(false);
    const [isLoading, setLoding] = useState(true);

    const [captchaImg, setCaptchaImage] = useState("");

    const [selectedAddress4, setSelectedAddress4] = useState(null);
    const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]);
    const [termsAndConAccept, setTermsAndConAccept] = useState(false);
    const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
    const [isValid, setisValid] = useState(false);
    const [checkCountry, setCheckCountry] = useState(false);
    const email = document.getElementById("email-login")
    const [checkEmail, setCheckEmail] = useState(false)
    const [checkEmailBlur, setCheckEmailBlur] = useState(false)
    const [districtErrStr, setDistrictErrStr] = useState("")

    const address4ComboList = ComboData.district;
    const address5ComboList = ComboData.country;
    const [showId, setshowId] = useState(false);
    const [showComId, setshowComId] = useState(false);

    useEffect(() => {
        location.state?.responseData ?? {}
        if (captchaImg == "")
            onCaptchaChange();
        responseToData();
    }, []);

    const handleClickShowId = () => {
        setshowId(!showId);
    };

    const handleMouseDownId = (event) => {
        event.preventDefault();
    };

    const handleClickShowComId = () => {
        setshowComId(!showId);
    };

    const handleMouseDownComId = (event) => {
        event.preventDefault();
    };

    useEffect(() => {
        setDistrictErrStr("");
        if (selectedAddress5?.type === "hongKong") {
            if (selectedAddress4 == null || selectedAddress4 == "" || selectedAddress4 == {})
                setDistrictErrStr(getRequiredErrStr("district"))
        }
    }, [selectedAddress4, selectedAddress5])

    function getRequiredErrStr(fieldname) {
        return displayErrorMsg(intl.formatMessage({ id: 'require' }, { fieldname: fieldname ? intl.formatMessage({ id: fieldname }) : "" }));
    }

    function getMaxErrStr(num, fieldname) {
        return displayErrorMsg(intl.formatMessage({ id: 'noMoreThenNWords' }, { num: num, fieldname: fieldname ? intl.formatMessage({ id: fieldname }) + ": " : "" }));
    }


    const responseToData = () => {
        let rd = JSON.parse("{\"emailAddress\":\"test@gmail.com\",\"postalAddress\":{\"EngPremisesAddress\":{\"EngDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"TSING YI\"},\"EngEstate\":{\"EstateName\":\"Cheung Hang Estate\",\"EngPhase\":{\"PhaseName\":\"N/A\"}},\"BuildingName\":\"Hang Lai House\",\"EngBlock\":{\"BlockDescriptor\":\"Block\",\"BlockNo\":\"2\"},\"Region\":\"NT\",\"EngStreet\":{\"StreetName\":\"Liu To Road\",\"BuildingNoFrom\":\"6\"},\"Eng3dAddress\":{\"EngFloor\":{\"FloorNum\":\"33\"},\"EngUnit\":{\"UnitDescriptor\":\"Room\",\"UnitNo\":\"3301\"}}}},\"mobileNumber\":{\"CountryCode\":\"852\",\"SubscriberNumber\":\"99999999\"},\"residentialAddress\":{\"ChiPremisesAddress\":{\"Chi3dAddress\":{\"ChiUnit\":{\"UnitDescriptor\":\"室\",\"UnitNo\":\"1010\"},\"ChiFloor\":{\"FloorNum\":\"10\"}},\"ChiBlock\":{\"BlockDescriptor\":\"座\",\"BlockNo\":\"2\"},\"BuildingName\":\"亨麗樓(第2座)\",\"ChiDistrict\":{\"DcDistrict\":\"KC\",\"Sub-district\":\"青衣\"},\"Region\":\"新界\",\"ChiEstate\":{\"EstateName\":\"長亨邨\"},\"ChiStreet\":{\"StreetName\":\"寮肚路\",\"BuildingNoFrom\":\"6\"}}},\"enName\":{\"UnstructuredName\":\"Testing Co One\"},\"idNo\":{\"Identification\":\"G561107\",\"CheckDigit\":\"4\"},\"chName\":{\"ChineseName\":\"測試商一\"}}");
        //let rd = JSON.parse(location.state?.responseData.data);
        let data = {
            "enName": rd?.enName?.UnstructuredName ?? "",
            "chName": rd?.chName?.ChineseName ?? "",
            "idNo": rd?.idNo?.Identification ?? "",
            "checkDigit": rd?.idNo?.CheckDigit ?? "",
            "email": rd?.emailAddress ?? "",
            "phone": rd?.mobileNumber?.SubscriberNumber ?? "",
            "phoneCountryCode": rd?.mobileNumber?.CountryCode ?? "",
        };

        if (rd?.postalAddress) {
            if (rd?.postalAddress?.EngPremisesAddress) {
                data["address1"] = getAddressEng(rd?.postalAddress?.EngPremisesAddress);
            } else if (rd.postalAddress.ChiPremisesAddress) {
                data["address1"] = getAddressChi(rd?.postalAddress?.ChiPremisesAddress);
            }
        } else if (rd?.residentialAddress) {
            if (rd?.residentialAddress?.EngPremisesAddress) {
                data["address1"] = getAddressEng(rd?.residentialAddress?.EngPremisesAddress);
            } else if (rd?.residentialAddress?.ChiPremisesAddress) {
                data["address1"] = getAddressChi(rd?.residentialAddress?.ChiPremisesAddress);
            }
        }

        setIAmSmartData(data);

    }


    const getAddressEng = (pAdd) => {
        let unit = (pAdd.Eng3dAddress?.EngUnit?.UnitDescriptor ?? "") + " " + (pAdd.Eng3dAddress?.EngUnit?.UnitNo ?? "");
        let block = (pAdd.EngBlock?.BlockDescriptor ?? "") + " " + (pAdd.EngBlock?.BlockNo ?? "");
        let floor = pAdd.Eng3dAddress?.EngFloor?.FloorNum ? pAdd.Eng3dAddress?.EngFloor?.FloorNum + "/F " : "";
        let street = (pAdd.EngStreet?.EngUnit?.UnitDescriptor ?? "") + " " + (pAdd.Eng3dAddress?.EngUnit?.UnitNo ?? "");
        //let region = pAdd.Region ?? "";
        let buildingName = pAdd.BuildingName ?? "";
        let estate = pAdd.EngEstate?.EstateName ?? "";
        let district = pAdd.EngDistrict["Sub - district"] ?? "";
        return getAddressStr([unit, block, floor, buildingName, estate, street, district]);
    }

    const getAddressChi = (pAdd) => {
        let unit = (pAdd.Chi3dAddress?.ChiUnit?.UnitDescriptor ?? "") + " " + (pAdd.Chi3dAddress?.ChiUnit?.UnitNo ?? "");
        let block = (pAdd.ChiBlock?.BlockDescriptor ?? "") + " " + (pAdd.ChiBlock?.BlockNo ?? "");
        let floor = pAdd.Chi3dAddress?.ChiFloor?.FloorNum ? pAdd.Chi3dAddress?.ChiFloor?.FloorNum + "樓 " : "";
        let street = (pAdd.ChiStreet?.ChiUnit?.UnitDescriptor ?? "") + " " + (pAdd.Chi3dAddress?.ChiUnit?.UnitNo ?? "");
        //let region = pAdd.Region ?? "";
        let buildingName = pAdd.BuildingName ?? "";
        let estate = pAdd.ChiEstate?.EstateName ?? "";
        let district = pAdd.ChiDistrict["Sub - district"] ?? "";
        return getAddressStr([district, street, estate, buildingName, street, floor, block, unit]);
    }

    const getAddressStr = (strs) => {
        let add = ""
        strs.forEach(str => {
            add += str.trim() ? str.trim() + ", " : "";
        });
        add = add.trim();
        if (add?.slice(- 1) == ",") {
            add = add.substring(0, add.length - 1);
        }
        return add;
    }

    const handleCheckEmail = async () => {
        if (values?.email) {
            const response = await axios.get(`${GET_USER_EMAIL}`, {
                params: {
                    email: values.email,
                }
            })
            setCheckEmail((Number(response.data[0]) === 1))
            return Number(response.data[0]) === 1
        }
    }

    useEffect(() => {
        if (email) {
            email.addEventListener("blur", function () {
                setCheckEmailBlur(true)
            })
        }
    }, [email])

    useEffect(() => {
        if (checkEmailBlur) {
            handleCheckEmail()
            setCheckEmailBlur(false)
        }
    }, [checkEmailBlur])

    useEffect(() => {
        if (iAmSmartData) {
            formik.setFieldValue("enName", iAmSmartData.enName ?? "");
            formik.setFieldValue("chName", iAmSmartData.chName ?? "");
            formik.setFieldValue("idNo", iAmSmartData.idNo ?? "");
            formik.setFieldValue("checkDigit", iAmSmartData.checkDigit ?? "");
            formik.setFieldValue("email", iAmSmartData.email ?? "");
            formik.setFieldValue("emailConfirm", iAmSmartData.email ?? "");
            formik.setFieldValue("phone", iAmSmartData.phone ?? "");
            formik.setFieldValue("phoneCountryCode", iAmSmartData.phoneCountryCode ?? "");
            formik.setFieldValue("address1", iAmSmartData.address1 ?? "");
            props.setIdNo(iAmSmartData.idNo ?? "");
        }
    }, [iAmSmartData])

    const onCaptchaChange = () => {
        HttpUtils.post({
            url: POST_CAPTCHA,
            params: { width: 130, height: 40, captcha: captchaImg },
            onSuccess: (responseData) => {
                props.setBase64Url(responseData.base64Url)
                localStorage.setItem("base64Url", responseData.base64Url);
                setCaptchaImage(localStorage.getItem('base64Url'));
            }
        });
    }


    const checkDataField = (data) => {
        if (data.address1 !== "" &&
            data.email !== "" &&
            data.emailConfirm !== "" &&
            data.email == data.emailConfirm &&
            data.phone !== "" &&
            data.phoneCountryCode !== "" &&
            termsAndConAccept == true &&
            data.captchaField &&
            handleEmail(data.email) &&
            handlePhone(data.phone) &&
            handleCaptcha(data.captchaField) &&
            !checkEmail
        ) {
            setisValid(true)
            return isValid
        } else {
            setisValid(false)
            return isValid
        }
    };

    const handleCheckBoxChange = (event) => {
        if (event.target.name == 'termsAndConAccept') {
            setTermsAndConAccept(event.target.checked)
            setTermsAndConNotAccept(!event.target.checked)
        }
        if (event.target.name == 'termsAndConNotAccept') {
            setTermsAndConNotAccept(event.target.checked)
            setTermsAndConAccept(!event.target.checked)
        }
    };

    useEffect(() => {
        props.setUpdateValid(isValid)
    }, [isValid])

    useEffect(() => {
        checkDataField(values)
    }, [
        selectedAddress4, selectedAddress5,
        termsAndConAccept, termsAndConNotAccept])

    useEffect(() => {
        props.step == 2 ? _onSubmit() : null;
        if (captchaImg == "")
            onCaptchaChange();
        checkDataField(values)
    }, [props.step])

    const { handleSubmit } = useForm({})
    const _onSubmit = () => {
        setLoding(true);

        const userAddress = {
            "addressLine1": "",
            "addressLine2": "",
            "addressLine3": "",
            "district": "",
            "country": ""
        };
        userAddress.addressLine1 = values.address1
        userAddress.addressLine2 = values.address2
        userAddress.addressLine3 = values.address3
        values.address4 = selectedAddress4 == null ? "" : selectedAddress4.type
        values.address5 = selectedAddress5.type

        const userFaxNo = {
            "countryCode": values.faxCountryCode,
            "faxNumber": values.fax,
        };
        const userMobileNumber = {
            "countryCode": values.phoneCountryCode,
            "phoneNumber": values.phone,
        };
        let tncFlag = false;
        if (termsAndConAccept) {
            tncFlag = true
        }
        if (termsAndConNotAccept) {
            tncFlag = false
        }

        const formData = {
            enName: iAmSmartData.enName,
            chName: iAmSmartData.chName,
            emailAddress: values.email,
            idDocType: "HKID",
            identification: iAmSmartData.idNo,
            checkDigit: iAmSmartData.checkDigit,
            tncFlag: tncFlag,
            type: "IND",
            userFaxNo: JSON.stringify(userFaxNo),
            userMobileNumber: JSON.stringify(userMobileNumber),
            userAddress: JSON.stringify(userAddress)
        };

        if (isValid) {
            axios.post(POST_IAMSMART_USER_REGISTER, formData, {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            })
                .then((response) => {
                    console.log(response)
                    setCheckUpload(true)
                    setLoding(false);
                })
                .catch(error => {
                    console.error(error);
                    setLoding(false);
                });
        } else {
            setLoding(false);
        }
    }

    function handlePhone(phone) {
        if (phone.length < 8) {
            return false;
        } else {
            return true;
        }
    }

    function handleCaptcha(captchaField) {
        return captchaField;
    }

    function handleEmail(email) {
        var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
        if (!email.match(validRegex)) {
            return false;
        } else {
            return true;
        }
    }

    function displayErrorMsg(errorMsg) {
        return <Typography variant="errorMessage1">{errorMsg}</Typography>
    }

    const formik = useFormik({
        initialValues: ({
            email: iAmSmartData.email ?? "",
            emailConfirm: iAmSmartData.email ?? "",
            address1: iAmSmartData.address1 ?? "",
            address2: '',
            address3: '',
            phone: iAmSmartData.phone ?? "",
            phoneCountryCode: iAmSmartData.phoneCountryCode ?? "852",
            submit: null,
            fax: '',
            faxCountryCode: '852',
            captchaField: ''
        }),
        validationSchema: yup.object().shape({
            address1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
            address2: yup.string().max(40),
            address3: yup.string().max(40),
            email: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))),
            emailConfirm: yup.string().email(displayErrorMsg(intl.formatMessage({ id: 'validEmailFormat' }))).max(128, getMaxErrStr(128)).required(displayErrorMsg(intl.formatMessage({ id: 'requireEmail' }))).oneOf([yup.ref('email'), null], displayErrorMsg(intl.formatMessage({ id: 'validSameEmail' }))),
            phoneCountryCode: yup.string().min(2, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast2Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),
            phone: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requireAtLeast8Number' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),
            captchaField: yup.string().max(5, getMaxErrStr(5)).required(displayErrorMsg(intl.formatMessage({ id: 'requireVerify' }))),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
        }),
    });


    const { values } = formik

    useEffect(() => {
        checkDataField(values)
    }, [values])

    return (
        <FormikProvider value={formik}>
            <form onSubmit={handleSubmit(_onSubmit)}>
                {/* Input Form */}
                <FormGroup id={"inputForm"} sx={{ display: props.step === 0 ? "" : "none" }}>
                    <Grid container spacing={3}>
                        <Grid item xs={12} md={12}>

                            <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

                                <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
                                        <FormattedMessage id="becomeNewPersonalUser" />
                                    </Typography><img src={iAmSmartICon} alt="iAM Smart" width="50" />
                                </div>

                                <Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}>
                                    <FormattedMessage id="requireString" />。
                                </Typography>
                                <Stack mt={1} direction="row" style={{ alignItems: "center" }}><img src={iAmSmartICon} alt="iAM Smart" width="25" /><Typography mt={0.25} variant="h6" >: <FormattedMessage id="MSG.providedByIAmSmart" /></Typography></Stack>

                            </Stack>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container spacing={1}>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="yourPersonalInformation" />
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12} >
                                    <Grid container sx={{ mb: 1 }}>

                                        <InputLabel htmlFor="idDocType-signup">
                                            <Typography variant="h5" sx={{ mr: 1 }}>
                                                <FormattedMessage id="HKIDcard" />: {iAmSmartData.idNo ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                                {/* {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"} */}
                                            </Typography>
                                            <Stack direction="row">
                                                <Typography variant="h5">
                                                    {iAmSmartData?.idNo?.slice(0, 4)}{showId ? iAmSmartData?.idNo?.slice(4) : "****"}{showId ? '(' + iAmSmartData.checkDigit + ')' : null}
                                                </Typography>
                                                <IconButton
                                                    aria-label="toggle id visibility"
                                                    onClick={handleClickShowId}
                                                    onMouseDown={handleMouseDownId}
                                                    edge="end"
                                                    size="medium"
                                                >
                                                    {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                                </IconButton>
                                            </Stack>
                                        </InputLabel>

                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="enName-signup">
                                            <Typography variant="h5">
                                                <FormattedMessage id="userEnglishName" />: {iAmSmartData.enName}{iAmSmartData.enName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                            </Typography>

                                        </InputLabel>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="chName-signup">
                                            <Typography variant="h5">
                                                {intl.formatMessage({ id: 'userChineseName' })}: {iAmSmartData.chName}{iAmSmartData.chName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                            </Typography>
                                        </InputLabel>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="address1-signup">
                                            <Typography variant="h5">
                                                <FormattedMessage id="formAddress" />
                                                <span style={{ color: '#f10000' }}>*</span>
                                                {iAmSmartData.address1 !="" && iAmSmartData.address1 ==formik.values.address1 ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                            </Typography>
                                        </InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            autoFocus
                                            error={Boolean(formik.touched.address1 && formik.errors.address1)}
                                            id="address1-signup"
                                            value={formik.values.address1}
                                            name="address1"
                                            onChange={formik.handleChange}
                                            placeholder={intl.formatMessage({ id: 'addressLine1' })}
                                            onBlur={formik.handleBlur}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.address2 && formik.errors.address2)}
                                            id="address2-signup"
                                            value={formik.values.address2}
                                            name="address2"
                                            onBlur={formik.handleBlur}
                                            onChange={formik.handleChange}
                                            placeholder={intl.formatMessage({ id: 'addressLine2' })}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.address3 && formik.errors.address3)}
                                            id="address3-signup"
                                            value={formik.values.address3}
                                            name="address3"
                                            onBlur={formik.handleBlur}
                                            onChange={formik.handleChange}
                                            placeholder={intl.formatMessage({ id: 'addressLine3' })}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        <Autocomplete
                                            disablePortal
                                            id="address4-combo"
                                            value={selectedAddress4}
                                            options={address4ComboList}
                                            disabled={checkCountry}
                                            error={Boolean(districtErrStr != "")}
                                            onBlur={formik.handleBlur}
                                            getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
                                            onChange={(event, newValue) => {
                                                setSelectedAddress4(newValue);
                                            }}
                                            sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({ id: 'region' })}
                                            />}
                                        />
                                        <Autocomplete
                                            disablePortal
                                            id="address5-combo"
                                            value={selectedAddress5}
                                            options={address5ComboList}
                                            getOptionLabel={(option) => option.type ? intl.formatMessage({ id: option.type }) : ""}
                                            onChange={(event, newValue) => {
                                                if (newValue !== null) {
                                                    setSelectedAddress5(newValue);
                                                    if (newValue.type === 'hongKong') {
                                                        setCheckCountry(false)
                                                    } else {
                                                        setSelectedAddress4("");
                                                        setCheckCountry(true)
                                                    }
                                                } else {
                                                    setSelectedAddress4("");
                                                    setCheckCountry(true)
                                                }
                                            }}

                                            sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
                                            renderInput={(params) => <TextField {...params} placeholder={intl.formatMessage({ id: 'regionOrCountry' })} />}
                                        />
                                        {formik.touched.address1 && formik.errors.address1 && (
                                            <FormHelperText error id="helper-text-address1-signup">
                                                {formik.errors.address1}
                                            </FormHelperText>
                                        )}
                                        {formik.touched.address2 && formik.errors.address2 && (
                                            <FormHelperText error id="helper-text-address2-signup">
                                                {formik.errors.address2}
                                            </FormHelperText>
                                        )}
                                        {formik.touched.address3 && formik.errors.address3 && (
                                            <FormHelperText error id="helper-text-address3-signup">
                                                {formik.errors.address3}
                                            </FormHelperText>
                                        )}

                                        {districtErrStr != "" && (
                                            <FormHelperText error >
                                                {districtErrStr}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="yourContact" />
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container>
                                        <Grid item xs={12} md={6}>
                                            <Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                <InputLabel htmlFor="email-signup">
                                                    <Typography variant="h5">
                                                        <FormattedMessage id="userContactEmail" />
                                                        <span style={{ color: '#f10000' }}>*</span>
                                                        {iAmSmartData.email && iAmSmartData.email ==formik.values.email  ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                                    </Typography>
                                                </InputLabel>
                                                <OutlinedInput
                                                    fullWidth
                                                    error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)}
                                                    id="email-login"
                                                    type="email"
                                                    value={formik.values.email.trim()}
                                                    name="email"
                                                    onChange={formik.handleChange}
                                                    placeholder={intl.formatMessage({ id: 'userContactEmail' })}
                                                    onBlur={formik.handleBlur}
                                                    inputProps={{
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                />
                                                {formik.touched.email && formik.errors.email && (
                                                    <FormHelperText error id="helper-text-email-signup">
                                                        {formik.errors.email}
                                                    </FormHelperText>
                                                )}
                                                {checkEmail && (
                                                    <FormHelperText error id="helper-text-email-signup">
                                                        <FormattedMessage id="emailUsed" />
                                                    </FormHelperText>
                                                )}
                                            </Stack>
                                        </Grid>
                                        <Grid item xs={12} md={6}>
                                            <Stack spacing={1} >
                                                <InputLabel htmlFor="emailConfirm-signup">
                                                    <Typography variant="h5">
                                                        <FormattedMessage id="userContactEmail" />
                                                        <span style={{ color: '#f10000' }}>*</span>
                                                    </Typography>
                                                </InputLabel>
                                                <OutlinedInput
                                                    fullWidth
                                                    error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)}
                                                    id="emailConfirm-login"
                                                    type="email"
                                                    value={formik.values.emailConfirm}
                                                    name="emailConfirm"
                                                    // onBlur={formik.handleBlur}
                                                    onChange={formik.handleChange}
                                                    placeholder={intl.formatMessage({ id: 'confirmEmail' })}
                                                    onBlur={formik.handleBlur}
                                                    inputProps={{
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                />
                                                {formik.touched.emailConfirm && formik.errors.emailConfirm && (
                                                    <FormHelperText error id="helper-text-emailConfirm-signup">
                                                        {formik.errors.emailConfirm}
                                                    </FormHelperText>
                                                )}
                                            </Stack>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container>
                                        <Grid item xs={12} md={6}>
                                            <Grid container>
                                                <Grid item xs={12} md={12}>
                                                    <Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
                                                        <InputLabel htmlFor="phone-signup">
                                                            <Typography variant="h5">
                                                                <FormattedMessage id="userContactNumber" />
                                                                <span style={{ color: '#f10000' }}>*</span>
                                                                {iAmSmartData.phone && iAmSmartData.phone ==formik.values.phone && iAmSmartData.phoneCountryCode ==formik.values.phoneCountryCode  ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : null}
                                                            </Typography>
                                                        </InputLabel>
                                                        <Stack direction="row">
                                                            <OutlinedInput
                                                                id="phoneCountryCode-login"
                                                                type="phoneCountryCode"
                                                                value={formik.values.phoneCountryCode.trim()}
                                                                name="phoneCountryCode"
                                                                // onBlur={formik.handleBlur}
                                                                // onChange={formik.handleChange}
                                                                onChange={(event) => {
                                                                    const value = event.target.value;
                                                                    if (value.match(/[^0-9]/)) {
                                                                        return event.preventDefault();
                                                                    }
                                                                    formik.setFieldValue("phoneCountryCode", value);
                                                                }}
                                                                placeholder={intl.formatMessage({ id: 'dialingCode' })}
                                                                error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                onBlur={formik.handleBlur}
                                                                inputProps={{
                                                                    maxLength: 3,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{ width: '25%' }}
                                                            />
                                                            <OutlinedInput
                                                                id="phone-login"
                                                                type="phone"
                                                                value={formik.values.phone.trim()}
                                                                name="phone"
                                                                // onBlur={formik.handleBlur}
                                                                // onChange={formik.handleChange}
                                                                onChange={(event) => {
                                                                    const value = event.target.value;
                                                                    if (value.match(/[^0-9]/)) {
                                                                        return event.preventDefault();
                                                                    }
                                                                    formik.setFieldValue("phone", value);
                                                                }}
                                                                placeholder={intl.formatMessage({ id: 'userContactNumber' })}
                                                                error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                onBlur={formik.handleBlur}
                                                                inputProps={{
                                                                    maxLength: 11,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{ width: '75%' }}
                                                            />
                                                        </Stack>
                                                        {formik.touched.phone && formik.errors.phone && (
                                                            <FormHelperText error id="helper-text-phone-signup">
                                                                {formik.errors.phone}
                                                            </FormHelperText>
                                                        )}
                                                    </Stack>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                        <Grid item xs={12} md={6}>
                                            <Grid container>
                                                <Grid item xs={12} md={12}>
                                                    <Stack spacing={1} direction="column">
                                                        <InputLabel htmlFor="fax-signup">
                                                            <Typography variant="h5">
                                                                <FormattedMessage id="userFaxNumber" />
                                                            </Typography>
                                                        </InputLabel>
                                                        <Stack direction="row">
                                                            <OutlinedInput
                                                                error={Boolean(formik.touched.fax && formik.errors.fax)}
                                                                id="faxCountryCode-login"
                                                                type="faxCountryCode"
                                                                value={formik.values.faxCountryCode.trim()}
                                                                name="faxCountryCode"
                                                                // onChange={formik.handleChange}
                                                                onChange={(event) => {
                                                                    const value = event.target.value;
                                                                    if (value.match(/[^0-9]/)) {
                                                                        return event.preventDefault();
                                                                    }
                                                                    formik.setFieldValue("faxCountryCode", value);
                                                                }}
                                                                placeholder={intl.formatMessage({ id: 'dialingCode' })}
                                                                onBlur={formik.handleBlur}
                                                                inputProps={{
                                                                    maxLength: 3,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{ width: '25%' }}
                                                            />
                                                            <OutlinedInput
                                                                id="fax-login"
                                                                type="fax"
                                                                value={formik.values.fax.trim()}
                                                                name="fax"
                                                                onBlur={formik.handleBlur}
                                                                // onChange={formik.handleChange}
                                                                onChange={(event) => {
                                                                    const value = event.target.value;
                                                                    if (value.match(/[^0-9]/)) {
                                                                        return event.preventDefault();
                                                                    }
                                                                    formik.setFieldValue("fax", value);
                                                                }}
                                                                placeholder={intl.formatMessage({ id: 'userFaxNumber' })}
                                                                inputProps={{
                                                                    maxLength: 8,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{ width: '75%' }}
                                                            />
                                                        </Stack>
                                                    </Stack>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={12}>
                                <Grid container>
                                    <Grid item xs={12} md={12}>
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="termsAndCondition" />
                                            <span style={{ color: '#f10000' }}>*</span>
                                        </Typography>
                                    </Grid>
                                    <Grid item xs={12} md={12}>
                                        <Grid container>
                                            <Grid item xs={12} md={12}>
                                                <Typography variant="h5"  sx={{ textAlign: "left", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>

                                                    <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "termsAndCon" }) }} />
                                                </Typography>
                                            </Grid>
                                        </Grid>
                                        <Grid item xs={12} s={12} md={12} lg={12}>
                                            <Grid container>
                                                <Grid item xs={6} s={6} md={2} lg={2}>
                                                    <Grid container>
                                                        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
                                                            <Checkbox
                                                                checked={termsAndConAccept}
                                                                onChange={handleCheckBoxChange}
                                                                name="termsAndConAccept"
                                                                color="primary"
                                                                size="small"
                                                            />
                                                            <Typography variant="h5">
                                                                <FormattedMessage id="acceptTerms" />
                                                            </Typography>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                                <Grid item xs={6} s={6} md={3} lg={3}>
                                                    <Grid container>
                                                        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
                                                            <Checkbox
                                                                checked={termsAndConNotAccept}
                                                                onChange={handleCheckBoxChange}
                                                                name="termsAndConNotAccept"
                                                                color="primary"
                                                                size="small"
                                                            />
                                                            <Typography variant="h5">
                                                                <FormattedMessage id="rejectTerms" />
                                                            </Typography>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} lg={12}>
                                <Grid container>
                                    <Stack direction="column">
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="verify" />
                                            <span style={{ color: '#f10000' }}>*</span>
                                        </Typography>
                                        <Stack spacing={1} direction="row">
                                            <Grid item xs={5} lg={5} style={{ "border": "1px solid black" }}>
                                                <img src={captchaImg} alt="" />
                                            </Grid>
                                            <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
                                                <IconButton aria-label="refrashCaptcha" size="large" onClick={() => { onCaptchaChange() }}>
                                                    <LoopIcon fontSize="inherit" />
                                                </IconButton>
                                            </Grid>
                                            <Grid item xs={6} lg={6}>
                                                <OutlinedInput
                                                    fullWidth
                                                    id="captchaField"
                                                    type="text"
                                                    value={formik.values.captchaField.trim()}
                                                    onBlur={formik.handleBlur}
                                                    error={Boolean(formik.touched.captchaField && formik.errors.captchaField)}
                                                    name="captchaField"
                                                    onChange={(event) => {
                                                        const value = event.target.value;
                                                        props.setCheckCode(event.target.value);
                                                        formik.setFieldValue("captchaField", value);
                                                    }}
                                                    sx={{ width: '75%' }}
                                                />
                                            </Grid>
                                        </Stack>
                                        {formik.touched.captchaField && formik.errors.captchaField && (
                                            <FormHelperText error id="helper-text-captcha-signup">
                                                {formik.errors.captchaField}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </FormGroup>
                {/* Preview Form */}
                <FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none" }}>
                    <Grid container spacing={3}>
                        <Grid item xs={12} md={12}>
                            <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
                                    <Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>
                                        <FormattedMessage id="becomeNewPersonalUser" />
                                    </Typography>
                                </div>
                            </Stack>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container spacing={2}>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="yourPersonalInformation" />
                                        </Typography>
                                        {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                        Already have an account?
                                    </Typography> */}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12} >
                                    <Stack direction="row">
                                        <Typography variant="h5" color={theme.palette.grey[600]} sx={{ mr: 1 }}>
                                            <FormattedMessage id="userIdDoc" />
                                        </Typography>
                                        <Typography variant="h5" name="preview-idDocType-1">
                                            {formik?.values?.idNo?.slice(0, 4)}
                                            {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
                                        </Typography>
                                        <Typography variant="h5" name="preview-idDocType-2">
                                            {showComId ? formik?.values?.idNo?.slice(4) : "****"}{showComId ? '(' + formik.values.checkDigit + ')' : null}
                                            {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
                                        </Typography>
                                        <IconButton
                                            aria-label="toggle id visibility"
                                            onClick={handleClickShowComId}
                                            onMouseDown={handleMouseDownComId}
                                            edge="end"
                                            size="medium"
                                        >
                                            {showComId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                        </IconButton>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="h5" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="userEnglishName" />:
                                        </Typography>
                                        <Typography variant="h5" id="preview-enName-signup">
                                            {formik.values.enName}
                                        </Typography>
                                        {iAmSmartData.enName ? <img src={iAmSmartICon} alt="iAM Smart" width="25" /> : <></>}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="h5" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="userChineseName" />:
                                        </Typography>
                                        <Typography variant="h5" id="preview-chName-signup">
                                            {formik.values.chName}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1} direction="column">
                                        <Typography variant="h5" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="formAddress" />:
                                        </Typography>
                                        <Stack spacing={1} direction="column">
                                            <Typography variant="h5" id="preview-address1-signup">
                                                {formik.values.address1}
                                            </Typography>
                                            {formik.values.address2 != null ?
                                                <Typography variant="h5" id="preview-address2-signup">
                                                    {formik.values.address2}
                                                </Typography>
                                                : null}
                                            {formik.values.address3 != null ?
                                                <Typography variant="h5" id="preview-address3-signup">
                                                    {formik.values.address3}
                                                </Typography>
                                                : null}
                                            {selectedAddress5.type === "hongKong" ?
                                                <Stack direction="column">
                                                    <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                        <FormattedMessage id="region" />:
                                                    </Typography>
                                                    <Typography variant="h5">
                                                        {!selectedAddress4 ? "" : intl.formatMessage({ id: selectedAddress4.type })}
                                                    </Typography>
                                                </Stack>
                                                : null}
                                            <Stack direction="column">
                                                <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup">
                                                    <FormattedMessage id="regionOrCountry" />:
                                                </Typography>
                                                <Typography variant="h5">
                                                    {intl.formatMessage({ id: selectedAddress5.type })}
                                                </Typography>
                                            </Stack>
                                        </Stack>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="yourContact" />
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="h5" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="userContactEmail" />:
                                        </Typography>
                                        <Typography variant="h5" id="preview-email-signup">
                                            {formik.values.email}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="h5" color={theme.palette.grey[600]}>
                                            <FormattedMessage id="userContactNumber" />:
                                        </Typography>
                                        <Typography variant="h5" id="preview-phone-signup">
                                            +{formik.values.phoneCountryCode} {formik.values.phone}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                {formik.values.faxCountryCode != "" && formik.values.fax != "" ?
                                    <Grid item xs={12} md={6}>
                                        <Stack spacing={1} direction="row">
                                            <Typography variant="h5" color={theme.palette.grey[600]}>
                                                <FormattedMessage id="userFaxNumber" />:
                                            </Typography>
                                            <Typography variant="h5" id="preview-fax-signup">
                                                +{formik.values.faxCountryCode} {formik.values.fax}
                                            </Typography>
                                        </Stack>
                                    </Grid>
                                    : null}
                            </Grid>
                        </Grid>
                    </Grid>
                </FormGroup>
                {/* Submit page */}
                <FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none" }}>
                    <Grid container spacing={3}>
                        {isLoading ?
                            <LoadingComponent /> :
                            <Grid item xs={12}>
                                {checkUpload ?
                                    // SUCCESS page
                                    <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                        <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                                        <Typography display="inline" variant="h4">
                                            <FormattedMessage id="registerSubmitted" />
                                        </Typography>
                                        <Typography display="inline" variant="h4">
                                            <FormattedMessage id="emailSent" />
                                        </Typography>
                                        <Button variant="outlined" component={Link} to="/login" ><Typography variant="h5">
                                            <FormattedMessage id="backToLogin" />
                                        </Typography></Button>
                                    </Stack>
                                    :
                                    // ERROR page
                                    <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                        {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                        <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
                                        <Typography display="inline" variant="h4">
                                            <FormattedMessage id="registerFail" />
                                        </Typography>
                                        <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="h5">
                                            <FormattedMessage id="backToLogin" />
                                        </Typography></Button>
                                    </Stack>
                                }
                            </Grid>
                        }
                    </Grid>
                </FormGroup>
            </form>
        </FormikProvider>
    );
}

export default CustomFormWizard;