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

// material-ui
import {
  Box,
  Button,
  FormControl,
  FormHelperText,
  Grid, IconButton,
  InputAdornment,
  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";

// project import
// import AnimateButton from 'components/@extended/AnimateButton';
import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
import {apiPath} from "auth/utils";
import axios from "axios";
import {POST_PUBLIC_USER_REGISTER} from "utils/ApiPathConst";

// assets
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
// import { Paper } from '../../../../node_modules/@mui/material/index';

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

const BusCustomFormWizard = (props) => {
    
    const [level, setLevel] = useState();
    const [showPassword, setShowPassword] = useState(false);
    const [showConfirmPassword, setshowConfirmPassword] = useState(false);

    const handleClickShowPassword = () => {
        setShowPassword(!showPassword);
    };
    const handleClickShowConfirmPassword = () => {
        setshowConfirmPassword(!showConfirmPassword);
    };

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

    const changePassword = (value) => {
        const temp = strengthIndicator(value);
        setLevel(strengthColorChi(temp));
    };

    const [selectedIdDocType, setSelectedIdDocType] = useState(null);
    const [selectedAddress4, setSelectedAddress4] = useState(null);
    const [selectedAddress5, setSelectedAddress5] = useState(null);
    const [termsAndConAccept, setTermsAndConAccept] = useState(false);
    const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
    
    const idDocTypeComboList = ["passport","HKID","CNID","BR","otherCert"];
    const address4ComboList = 
        ["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區",
         "坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"];
    const address5ComboList = ["香港","內地","澳門"];
    const termsAndCon = "Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"
    +"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"
        +"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"+"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"
                        +"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"
                        +"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"
                        +"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"
                        +"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"

                        useEffect(() => {
                    changePassword('');
    }, []);

    const checkDataField = (data)=> {
        if (data.username !=="",
            data.password !=="",
            data.enName !=="",
            data.email !=="",
            data.password !=="",
            data.password !==""
        )
        {
            return true
        }
    };

    const handleCheckBoxChange = (event) => {
        console.log (event.target)
        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)
        }
      };

    const {handleSubmit} = useForm({})
    const _onSubmit = () => {
        values.idDocType = selectedIdDocType
        values.address4 = selectedAddress4
        values.address5 = selectedAddress5
        console.log(values)
        const userAddress = {
            "addressLine1":values.address1,
            "addressLine2":values.address2,
            "addressLine3":values.address4,
            "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
        }
        console.log(tncFlag)
        if (checkDataField(values)){
            axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, {
                username: values.username,
                password: values.password,
                name: values.username,
                enName: values.enName,
                chName: values.chName,
                emailAddress: values.email,
                idDocType:values.idDocType,
                identification:values.idNo,
                checkDigit:values.checkDigit,
                userFaxNo:userFaxNo,
                userMobileNumber:userMobileNumber,
                userAddress:userAddress,
                tncFlag:tncFlag
            })
            .then((response) => {
                console.log("Success")
                console.log(response)
            })
            .catch(error => {
                console.error(error);
            });  

        }
    }

    const formik = useFormik({
        initialValues:({
            username:'',
            enName: '',
            chName: '',
            email: '',
            address1: '',
            address2: '',
            address3: '',
            password: '',
            confirmPassword: '',
            phone:'',
            phoneCountryCode:'',
            idNo:'',
            checkDigit:'',
            submit: null,
            fax:'',
            faxCountryCode:'',
        }),
        validationSchema:Yup.object().shape({
            username: Yup.string().max(255).required('請輸入用戶名稱'),
            password: Yup.string().max(255).required('請輸入密碼'),
            confirmPassword: Yup.string().max(255).required('請確認密碼'),
            enName: Yup.string().max(255).required('請輸入英文姓名'),
            chName: Yup.string().max(255).required('請輸入中文姓名'),
            address1: Yup.string().max(255).required('請輸入第一行地址'),
            address2: Yup.string().max(255).required('請輸入第二行地址'),
            address3: Yup.string().max(255).required('請輸入第三行地址'),
            email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
            idNo: Yup.string().max(255).required('請輸入證件號碼'),
            checkDigit:Yup.string().max(1).required('請輸入證件號碼'),
            idType: Yup.string().max(255).required('請輸入第三行地址')
        }),
    });
    const { values } = formik
    useEffect(() => {
        // console.log(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>          
                                </div>
                                <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography>
                                <Typography mt={0.25} 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}>
                            <Grid container spacing={1}>
                                <Grid item xs={12} md={12} >
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="username-signup">用戶登入名稱
                                        <span style={{color: '#f10000'}}>*</span>
                                        </InputLabel>
                                        <OutlinedInput
                                            id="username-login"
                                            type="text"
                                            value={formik.values.username}
                                            name="username"
                                            onChange={formik.handleChange}
                                            placeholder="用戶登入名稱"
                                            fullWidth
                                            error={Boolean(formik.touched.username && formik.errors.username)}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.username && formik.errors.username && (
                                            <FormHelperText error id="helper-text-username-signup">
                                            {formik.errors.username}
                                            </FormHelperText>
                                        )}
                                    </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}}>
                                                <Stack direction="row" justifyContent="space-between">
                                                    <InputLabel htmlFor="password-signup">密碼
                                                    <span style={{color: '#f10000'}}>*</span>
                                                    </InputLabel>
                                                    <InputLabel htmlFor="password-rule">密碼規則</InputLabel>
                                                </Stack>
                                                <OutlinedInput
                                                    fullWidth
                                                    error={Boolean(formik.touched.password && formik.errors.password)}
                                                    id="password-signup"
                                                    type={showPassword ? 'text' : 'password'}
                                                    value={formik.values.password}
                                                    name="password"
                                                    onChange={(e) => {
                                                        formik.handleChange(e);
                                                        changePassword(e.target.value);
                                                    }}
                                                    endAdornment={
                                                    <InputAdornment position="end">
                                                        <IconButton
                                                        aria-label="toggle password visibility"
                                                        onClick={handleClickShowPassword}
                                                        onMouseDown={handleMouseDownPassword}
                                                        edge="end"
                                                        size="large"
                                                        >
                                                        {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                                        </IconButton>
                                                    </InputAdornment>
                                                    }
                                                    placeholder="密碼"
                                                    onBlur={formik.handleBlur}
                                                    inputProps={{
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                />
                                                {formik.touched.password && formik.errors.password && (
                                                    <FormHelperText error id="helper-text-password-signup">
                                                    {formik.errors.password}
                                                    </FormHelperText>
                                                )}
                                            </Stack>
                                            <FormControl fullWidth sx={{ mt: 2 }}>
                                            <Grid container spacing={2} alignItems="center">
                                                <Grid item>
                                                <Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
                                                </Grid>
                                                <Grid item>
                                                <Typography variant="subtitle1" fontSize="0.75rem">
                                                    {level?.label}
                                                </Typography>
                                                </Grid>
                                            </Grid>
                                            </FormControl>
                                        </Grid>
                                        <Grid item xs={12} md={6} >
                                            <Stack spacing={1}>
                                                <InputLabel htmlFor="confirmPassword-signup">確認密碼
                                                    <span style={{color: '#f10000'}}>*</span>
                                                </InputLabel>
                                                <OutlinedInput
                                                    id="confirmPassword-login"
                                                    type={showConfirmPassword ? 'text' : 'password'}
                                                    value={formik.values.confirmPassword}
                                                    name="confirmPassword"
                                                    onChange={(e) => {
                                                        formik.handleChange(e);
                                                        changePassword(e.target.value);
                                                    }}
                                                    inputProps={{
                                                        onKeyDown: (e) => {
                                                            if (e.key === 'Enter') {
                                                                e.preventDefault();
                                                            }
                                                        },
                                                    }}
                                                    endAdornment={
                                                    <InputAdornment position="end">
                                                    <IconButton
                                                        aria-label="toggle password visibility"
                                                        onClick={handleClickShowConfirmPassword}
                                                        onMouseDown={handleMouseDownPassword}
                                                        edge="end"
                                                        size="large"
                                                    >
                                                        {showConfirmPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                                    </IconButton>
                                                    </InputAdornment>
                                                    }
                                                    placeholder="確認密碼"
                                                    fullWidth
                                                    error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)}
                                                />
                                                {formik.touched.confirmPassword && formik.errors.confirmPassword && (
                                                    <FormHelperText error id="helper-text-confirmPassword-signup">
                                                    {formik.errors.confirmPassword}
                                                    </FormHelperText>
                                                )}
                                            </Stack>
                                        </Grid>                                        
                                    </Grid>
                                </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: '#1A4399'}}>你的個人資料</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} >
                                    <Grid container sx={{mb:1}}>
                                        <Stack spacing={1}>
                                            <InputLabel htmlFor="idDocType-signup">身份證明文件
                                                <span style={{color: '#f10000'}}>*</span>
                                            </InputLabel>
                                            {/* {formik.touched.enName && formik.errors.enName && (
                                                <FormHelperText error id="helper-text-enName-signup">
                                                {formik.errors.enName}
                                                </FormHelperText>
                                            )} */}
                                        </Stack>
                                    </Grid>

                                    <Grid container>
                                        <Grid item xs={12} md={6} >
                                            <Stack spacing={1}  sx={{mr:{md:1},mb:{xs:0.5}}}>
                                                <Autocomplete
                                                    disablePortal
                                                    id="idDocType-combo"
                                                    value={selectedIdDocType === null ? null : selectedIdDocType}
                                                    options={idDocTypeComboList}
                                                    onChange={(event, newValue) => {
                                                        if (newValue !== null){
                                                            setSelectedIdDocType(newValue);
                                                        }
                                                    }}
                                                    sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
                                                    renderInput={(params) => <TextField {...params} placeholder="證件類別"/>}
                                                />
                                            </Stack>
                                        </Grid>
                                        {selectedIdDocType =="HKID"?
                                            <>
                                                <Grid item xs={10} md={5}>
                                                    <Stack spacing={1}>
                                                        <OutlinedInput
                                                            id="idNo-login"
                                                            type="text"
                                                            value={formik.values.idNo}
                                                            name="idNo"
                                                            onChange={formik.handleChange}
                                                            placeholder="證件號碼"
                                                            fullWidth
                                                            sx={{mr:1}}
                                                            error={Boolean(formik.touched.idNo && formik.errors.idNo)}
                                                            inputProps={{
                                                                maxLength: selectedIdDocType =='HKID'?7:18,
                                                                onKeyDown: (e) => {
                                                                    if (e.key === 'Enter') {
                                                                        e.preventDefault();
                                                                    }
                                                                },
                                                            }}
                                                        />
                                                        {formik.touched.idNo && formik.errors.idNo && (
                                                            <FormHelperText error id="helper-text-enName-signup">
                                                            {formik.errors.idNo}
                                                            </FormHelperText>
                                                        )}
                                                    </Stack>
                                                </Grid>
                                                <Grid item xs={2} md={1}>
                                                    <Stack spacing={1}>
                                                        <OutlinedInput
                                                            id="checkDigit-login"
                                                            type="text"
                                                            value={formik.values.checkDigit}
                                                            name="checkDigit"
                                                            onChange={formik.handleChange}
                                                            placeholder="( )"
                                                            // sx={{height:"53px"}}
                                                            inputProps={{
                                                                maxLength: 1,
                                                                onKeyDown: (e) => {
                                                                    if (e.key === 'Enter') {
                                                                        e.preventDefault();
                                                                    }
                                                                },
                                                            }}
                                                            fullWidth
                                                            error={Boolean(formik.touched.checkDigit && formik.errors.checkDigit)}
                                                        />
                                                        {formik.touched.checkDigit && formik.errors.checkDigit && (
                                                            <FormHelperText error id="helper-text-enName-signup">
                                                            {formik.errors.checkDigit}
                                                            </FormHelperText>
                                                        )}
                                                    </Stack>
                                                </Grid>
                                            </>:
                                            <Grid item xs={12} md={6}>
                                                <Stack spacing={1}>
                                                    <OutlinedInput
                                                        id="idNo-login"
                                                        type="text"
                                                        value={formik.values.idNo}
                                                        name="idNo"
                                                        onChange={formik.handleChange}
                                                        placeholder="證件號碼"
                                                        fullWidth
                                                        sx={{mr:1}}
                                                        error={Boolean(formik.touched.idNo && formik.errors.idNo)}
                                                        inputProps={{
                                                            onKeyDown: (e) => {
                                                                if (e.key === 'Enter') {
                                                                    e.preventDefault();
                                                                }
                                                            },
                                                        }}
                                                    />
                                                    {formik.touched.idNo && formik.errors.idNo && (
                                                        <FormHelperText error id="helper-text-enName-signup">
                                                        {formik.errors.idNo}
                                                        </FormHelperText>
                                                    )}
                                                </Stack>
                                            </Grid>
                                        }
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="enName-signup">英文姓名
                                            <span style={{color: '#f10000'}}>*</span>
                                        </InputLabel>
                                        <OutlinedInput
                                            id="enName-login"
                                            type="enName"
                                            value={formik.values.enName}
                                            name="enName"
                                            onChange={formik.handleChange}
                                            placeholder="與你的身份證明文件相同"
                                            fullWidth
                                            error={Boolean(formik.touched.enName && formik.errors.enName)}
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.enName && formik.errors.enName && (
                                            <FormHelperText error id="helper-text-enName-signup">
                                            {formik.errors.enName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="chName-signup">中文姓名</InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.chName && formik.errors.chName)}
                                            id="chName-signup"
                                            type="text"
                                            value={formik.values.chName}
                                            name="chName"
                                            onChange={formik.handleChange}
                                            placeholder="與你的身份證明文件相同"
                                            inputProps={{
                                                onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                    }
                                                },
                                            }}
                                        />
                                        {formik.touched.chName && formik.errors.chName && (
                                            <FormHelperText error id="helper-text-chName-signup">
                                            {formik.errors.chName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="address1-signup">地址
                                            <span style={{color: '#f10000'}}>*</span>
                                        </InputLabel>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(formik.touched.address1 && formik.errors.address1)}
                                            id="address1-signup"
                                            value={formik.values.address1}
                                            name="address1"
                                            onChange={formik.handleChange}
                                            placeholder="第一行"
                                            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 === null ? null : selectedAddress4}
                                                    options={address4ComboList}
                                                    onChange={(event, newValue) => {
                                                        if (newValue !== null){
                                                            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 === null ? null : selectedAddress5}
                                                    options={address5ComboList}
                                                    onChange={(event, newValue) => {
                                                        if (newValue !== null){
                                                            setSelectedAddress5(newValue);
                                                        }
                                                    }}
                                                    
                                                    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">電郵
                                                    <span style={{color: '#f10000'}}>*</span>
                                                </InputLabel>
                                                <OutlinedInput
                                                    fullWidth
                                                    error={Boolean(formik.touched.email && formik.errors.email)}
                                                    id="email-login"
                                                    type="email"
                                                    value={formik.values.email}
                                                    name="email"
                                                    onChange={formik.handleChange}
                                                    placeholder="電郵"
                                                    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>
                                                )}
                                            </Stack>
                                        </Grid>
                                        <Grid item xs={12} md={6}>
                                            <Stack spacing={1} >
                                                <InputLabel htmlFor="emailConfirm-signup">確認電郵
                                                    <span style={{color: '#f10000'}}>*</span>
                                                </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="確認電郵"
                                                    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">聯絡電話
                                                            <span style={{color: '#f10000'}}>*</span>
                                                        </InputLabel>
                                                        <Stack direction="row">
                                                            <OutlinedInput
                                                                id="phoneCountryCode-login"
                                                                type="phoneCountryCode"
                                                                value={formik.values.phoneCountryCode}
                                                                name="phoneCountryCode"
                                                                // onBlur={formik.handleBlur}
                                                                onChange={formik.handleChange}
                                                                placeholder="eg:852"
                                                                error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                inputProps={{
                                                                    maxLength: 3,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{width:'25%'}}
                                                            />
                                                            <OutlinedInput
                                                                id="phone-login"
                                                                type="phone"
                                                                value={formik.values.phone}
                                                                name="phone"
                                                                // onBlur={formik.handleBlur}
                                                                onChange={formik.handleChange}
                                                                placeholder="聯絡電話"
                                                                error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                inputProps={{
                                                                    maxLength: 8,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{width:'75%'}}
                                                            />
                                                            {formik.touched.phone && formik.errors.phone && (
                                                                <FormHelperText error id="helper-text-phone-signup">
                                                                {formik.errors.phone}
                                                                </FormHelperText>
                                                            )}
                                                        </Stack>
                                                    </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">傳真號碼</InputLabel>
                                                        <Stack direction="row">
                                                            <OutlinedInput
                                                                error={Boolean(formik.touched.fax && formik.errors.fax)}
                                                                id="faxCountryCode-login"
                                                                type="faxCountryCode"
                                                                value={formik.values.faxCountryCode}
                                                                name="faxCountryCode"
                                                                // onBlur={formik.handleBlur}
                                                                onChange={formik.handleChange}
                                                                placeholder="eg:852"
                                                                inputProps={{
                                                                    maxLength: 3,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{width:'25%'}}
                                                            />
                                                            <OutlinedInput
                                                                id="fax-login"
                                                                type="fax"
                                                                value={formik.values.fax}
                                                                name="fax"
                                                                // onBlur={formik.handleBlur}
                                                                onChange={formik.handleChange}
                                                                placeholder="傳真號碼"
                                                                inputProps={{
                                                                    maxLength: 8,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }}
                                                                sx={{width:'75%'}}
                                                            />
                                                        </Stack>
                                                    </Stack>
                                                </Grid>
                                            </Grid>
                                    </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12} mt={1} mb={1}>
                                    <Grid container>
                                        <Grid item xs={12} md={12}>
                                            <Stack spacing={1} 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 display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography>          
                                                <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>          
                                                <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                    <Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}}>上傳身份證明文件
                                                        <input type="file" accept=".csv" hidden />
                                                    </Button>
                                                    {/* <Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}} onClick={test123}>test
                                                    </Button> */}
                                                    <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>          
                                                </Stack>
                                                <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                    <Button variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
                                                    {/* <Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                                </Stack>
                                            </Stack>
                                        </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 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>我接受</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>我不接受</Typography>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>    
                            </Grid>
                        </Grid>
                    </Grid>
                </FormGroup>
            {/* Preview Form */}
                <FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}>
                    <Grid container spacing={2}>
                        <Grid item xs={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>
                                {/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> */}
                                <Typography mt={0.25} 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}>
                            <Grid container spacing={1}>
                                <Grid item xs={12} >
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            用戶登入名稱:                                         
                                        </Typography>
                                        <Typography id="preview-username-login">
                                            {formik.values.username}
                                        </Typography>
                                    </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: '#1A4399'}}>你的個人資料</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>
                                            身份證明文件
                                        </Typography>
                                    </Stack>
                                </Grid>

                                <Grid item xs={12} md={6} >
                                    <Stack spacing={1}  direction="row">
                                        <Typography>
                                            證件類別:
                                        </Typography>
                                        <Typography name = "preview-idDocType">
                                            {formik.values.idDocType}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            證件號碼:
                                        </Typography>
                                        <Typography id="idNo-login">
                                            {formik.values.idNo} ({formik.values.checkDigit})
                                        </Typography>
                                    </Stack>
                                </Grid>
                                
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            英文姓名:
                                        </Typography>
                                        <Typography id="preview-enName-signup">
                                            {formik.values.enName}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            中文姓名:
                                        </Typography>
                                        <Typography id="preview-chName-signup">
                                            {formik.values.chName}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            地址:
                                        </Typography>
                                        <Stack spacing={1} direction="column">
                                            <Typography id="preview-address1-signup">
                                                {formik.values.address1}
                                            </Typography>
                                            <Typography id="preview-address2-signup">
                                                {formik.values.address2}
                                            </Typography>
                                            <Typography id="preview-address3-signup">
                                                {formik.values.address3}
                                            </Typography>
                                            <Typography id="preview-address4-signup">
                                                {formik.values.address4}
                                            </Typography>
                                            <Typography id="preview-address5-signup">
                                                {formik.values.address5}
                                            </Typography>
                                        </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>
                                            電郵:
                                        </Typography>
                                        <Typography id="preview-email-signup">
                                            {formik.values.email}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            聯絡電話:
                                        </Typography>
                                        <Typography id="preview-phone-signup">
                                            +{formik.values.phoneCountryCode} {formik.values.phone}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1} direction="row">
                                        <Typography>
                                            傳真號碼:
                                        </Typography>
                                        <Typography id="preview-fax-signup">
                                            +{formik.values.faxCountryCode} {formik.values.fax}
                                        </Typography>
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} mt={1} mb={1}>
                                    <Stack spacing={1} 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 display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography>          
                                        <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>          
                                        <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                            <Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}}>上傳身份證明文件
                                            <input type="file" accept=".csv" hidden />
                                            </Button>
                                            <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>          
                                        </Stack>
                                    </Stack>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </FormGroup>
                {/* Submit page */}
                <FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none"}}>
                    <Grid container spacing={3}>
                        <Grid item xs={12}>
                            <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                <Button variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
                                {/* <Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                            </Stack>
                        </Grid>
                    </Grid>
                </FormGroup>
                    
            </form>
        </FormikProvider>
    );
}

export default BusCustomFormWizard;
