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 { 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";

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

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

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

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

    const [captcha, setCaptcha] = useState([]);
    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 address4ComboList = ComboData.district;
    const address5ComboList = ComboData.country;
    const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
        + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"
        + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評"
        + "估本網址所載或與本網址有關連的各項資料，並應在根據該等資料行事前，參照印行的香港"
        + "特別行政區憲報以核實該等資料，以及徵詢獨立意見。\n版權公告本網頁的內容，包括但不限"
        + "於所有文本、平面圖像、圖畫、圖片、照片以及數據或其他資料的匯編，均受版權保障。\n香"
        + "港特別行政區政府是本網頁內所有版權作品的擁有人，除非預先得到政府物流服務署的書面"
        + "授權，否則嚴禁複製、改編、分發、發布或向公眾提供該等版權作品。"


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

    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 = props.state.responseData;
        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 ? str + ", " : "";
        });
        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("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 },
            onSuccess: (responseData) => {
                localStorage.setItem("checkCode", responseData.checkCode);
                localStorage.setItem("base64Url", responseData.base64Url);
                setCaptcha(localStorage.getItem('checkCode'));
                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;
        onCaptchaChange();
        checkDataField(values)
    }, [props.step])

    const { handleSubmit } = useForm({})
    const _onSubmit = () => {
        setLoding(true);
        values.address4 = selectedAddress4
        values.address5 = selectedAddress5
        const userAddress = {
            "addressLine1": "",
            "addressLine2": "",
            "addressLine3": "",
            "district": "",
            "country": ""
        };
        userAddress.addressLine1 = values.address1
        userAddress.addressLine2 = values.address2
        userAddress.addressLine3 = values.address3
        userAddress.district = values.address4
        userAddress.country = values.address5

        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 == captcha;
    }

    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(255).required(displayErrorMsg('請輸入第一行地址')),
            address2: yup.string().max(255).required(displayErrorMsg('請輸入第二行地址')),
            address3: yup.string().max(255).required(displayErrorMsg('請輸入第三行地址')),
            email: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')),
            emailConfirm: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')).oneOf([yup.ref('email'), null], displayErrorMsg('請輸入相同電郵')),
            phoneCountryCode: yup.string().min(2, displayErrorMsg('請輸入最少2位數字')).required(displayErrorMsg('請輸入國際區號')),
            phone: yup.string().min(8, displayErrorMsg('請輸入最少8位數字')).required(displayErrorMsg('請輸入聯絡電話')),
            captchaField: yup.string().required(displayErrorMsg('請輸入驗證')).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' }}>成為新的個人用戶</Typography><img src={iAmSmartICon} alt="iAM Smart" width="50" />
                                </div>

                                <Typography mt={0.25} variant="h6" sx={{ color: '#f10000' }}>註有*的項目必須輸入資料。</Typography>
                                <Stack mt={1} direction="row" style={{ alignItems: "center" }}><img src={iAmSmartICon} alt="iAM Smart" width="25" /><Typography mt={0.25} variant="h6" >: 表示該項由「智方便」提供。</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' }}>你的個人資料</Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12} >
                                    <Grid container sx={{ mb: 1 }}>
                                        <Stack spacing={1}>
                                            <InputLabel htmlFor="idDocType-signup">
                                                <Typography variant="h5">
                                                    香港身份證: {iAmSmartData.idNo+"("+iAmSmartData.checkDigit+")"}
                                                </Typography>
                                            </InputLabel>
                                        </Stack>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="enName-signup">
                                            <Typography variant="h5">
                                                英文姓名: {iAmSmartData.enName}
                                            </Typography>
                                        </InputLabel>

                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="chName-signup">
                                            <Typography variant="h5">
                                                中文姓名: {iAmSmartData.chName}
                                            </Typography>
                                        </InputLabel>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="address1-signup">
                                            <Typography variant="h5">
                                                地址
                                                <span style={{ color: '#f10000' }}>*</span>
                                                {iAmSmartData.address1?<img src={iAmSmartICon} alt="iAM Smart" width="25" />:null}
                                            </Typography>
                                        </InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.address1 && formik.errors.address1)}
                                            id="address1-signup"
                                            value={formik.values.address1}
                                            name="address1"
                                            onChange={formik.handleChange}
                                            placeholder="第一行"
                                            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"
                                            onChange={formik.handleChange}
                                            placeholder="第二行"
                                            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"
                                            onChange={formik.handleChange}
                                            placeholder="第三行"
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        <Autocomplete
                                            disablePortal
                                            id="address4-combo"
                                            value={selectedAddress4}
                                            options={address4ComboList}
                                            disabled={checkCountry}
                                            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="區域 (只適用於香港)" />}
                                        />
                                        <Autocomplete
                                            disablePortal
                                            id="address5-combo"
                                            value={selectedAddress5}
                                            options={address5ComboList}
                                            onChange={(event, newValue) => {
                                                if (newValue !== null) {
                                                    setSelectedAddress5(newValue);
                                                    if (newValue == '香港') {
                                                        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="國家/地區" />}
                                        />
                                        {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>
                                        )}
                                    </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' }}>你的聯絡資料</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">
                                                        電郵
                                                        <span style={{ color: '#f10000' }}>*</span>
                                                        {iAmSmartData.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="電郵"
                                                    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">
                                                        此電郵已被注冊，請使用其他電郵
                                                    </FormHelperText>
                                                )}
                                            </Stack>
                                        </Grid>
                                        <Grid item xs={12} md={6}>
                                            <Stack spacing={1} >
                                                <InputLabel htmlFor="emailConfirm-signup">
                                                    <Typography variant="h5">
                                                        確認電郵
                                                        <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.trim()}
                                                    name="emailConfirm"
                                                    // onBlur={formik.handleBlur}
                                                    onChange={formik.handleChange}
                                                    placeholder="確認電郵"
                                                    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">
                                                                聯絡電話
                                                                <span style={{ color: '#f10000' }}>*</span>
                                                                {iAmSmartData.phone?<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="國際區號"
                                                                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="聯絡電話"
                                                                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">
                                                                傳真號碼
                                                            </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="國際區號"
                                                                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="傳真號碼"
                                                                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' }}>
                                            條款和條件
                                            <span style={{ color: '#f10000' }}>*</span>
                                        </Typography>
                                    </Grid>
                                    <Grid item xs={12} md={12}>
                                        <Grid container>
                                            <Grid item xs={12} md={12}>
                                                <Typography variant="h5" height="80%" sx={{ textAlign: "left", overflow: "scroll", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
                                                    {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">我接受</Typography>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                                <Grid item xs={6} s={6} md={2} lg={2}>
                                                    <Grid container>
                                                        <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
                                                            <Checkbox
                                                                checked={termsAndConNotAccept}
                                                                onChange={handleCheckBoxChange}
                                                                name="termsAndConNotAccept"
                                                                color="primary"
                                                                size="small"
                                                            />
                                                            <Typography variant="h5">我不接受</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' }}>
                                            驗證
                                            <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;
                                                        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' }}>成為新的個人用戶</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' }}>你的個人資料</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 spacing={1}>
                                        <Typography variant="h5" color={theme.palette.grey[600]}>
                                            身份證明文件
                                        </Typography>
                                        <Typography variant="h5" name="preview-idDocType">
                                            {formik.values.idNo+"("+formik.values.checkDigit+")"}
                                        </Typography>
                                    </Stack>
                                </Grid>

                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="h5" color={theme.palette.grey[600]}>
                                            英文姓名:
                                        </Typography>
                                        <Typography variant="h5" id="preview-enName-signup">
                                            {formik.values.enName}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="h5" color={theme.palette.grey[600]}>
                                            中文姓名:
                                        </Typography>
                                        <Typography variant="h5" id="preview-chName-signup">
                                            {formik.values.chName}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="h5" color={theme.palette.grey[600]}>
                                            地址:
                                        </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 == ("香港") ?
                                                <Stack direction="row">
                                                    <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup">
                                                        區域 (只適用於香港):
                                                    </Typography>
                                                    <Typography variant="h5">{selectedAddress4}</Typography>
                                                </Stack>
                                                : null}
                                            <Stack direction="row">
                                                <Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup">
                                                    國家/地區:
                                                </Typography>
                                                <Typography variant="h5">{selectedAddress5}</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' }}>你的聯絡資料</Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Stack spacing={1} direction="row">
                                        <Typography variant="h5" color={theme.palette.grey[600]}>
                                            電郵:
                                        </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]}>
                                            聯絡電話:
                                        </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]}>
                                                傳真號碼:
                                            </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">帳戶申請已成功提交。</Typography>
                                        <Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</Typography>
                                        <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</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">申請失敗，請稍後嘗試</Typography>
                                        <Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>
                                    </Stack>
                                }
                            </Grid>
                        }
                    </Grid>
                </FormGroup>
            </form>
        </FormikProvider>
    );
}

export default CustomFormWizard;