

// material-ui
import {
  Dialog, DialogTitle, DialogContent,
  Link, Button, Card, Box, Grid
} from '@mui/material';
import Typography from '@mui/material/Typography';
import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
import banner from 'assets/images/bg_ml.jpg';
import { Stack } from '../../../node_modules/@mui/material/index';
import { iAmSmartPath, clientId, getBowserType, isAppBowser, iAmSmartCallbackPath} from 'auth/utils'

import * as React from 'react';
import {FormattedMessage, useIntl} from "react-intl";

// ================================|| LOGIN ||================================ //

const RegisterCustom = () => {

  const [isPopUp, setIsPopUp] = React.useState(false);
  const intl = useIntl();

  const registerWithIAmSmart = () => {
    setIsPopUp(true);
  }

  const getQRWithIAmSmart = () => {
    if ((isAppBowser())) {
      openApp();
    } else {
      openQR();
    }
  }

  const openQR =()=>{
    let callbackUrl = "https://"+iAmSmartCallbackPath()+"/iamsmart/registrycallback";
    let url = iAmSmartPath + "/api/v1/auth/getQR"
      + "?clientID=" + clientId
      + "&responseType=code"
      +"&source=" + getBowserType()
      +"&redirectURI="+encodeURIComponent(callbackUrl)
      +"&scope="+encodeURIComponent("eidapi_auth eidapi_profiles")
      +"&lang=zh-HK"//en-US, zh-HK, or zh-CN
      //+"&state="
      +"&brokerPage=false"
    window.location.assign(url);
  }

  const openApp = () => {
    let callbackUrl = "https://"+iAmSmartCallbackPath()+"/iamsmart/registrycallback";
    let url = iAmSmartPath + "/api/v1/auth/getQR"
      + "?clientID=" + clientId
      + "&responseType=code"
      +"&source=" + getBowserType()
      +"&redirectURI="+encodeURIComponent(callbackUrl)
      +"&scope="+encodeURIComponent("eidapi_auth eidapi_profiles")
      +"&lang=zh-HK"//en-US, zh-HK, or zh-CN
      //+"&state="
      +"&brokerPage=true"
    window.location.assign(url);
  }

  return (
    <Stack justifyContent="center" sx={{ minHeight: '100vh', bgcolor: 'backgroundColor.default' }}>
      <img src={banner} alt="banner" width="100%" height="200px" />
      <center>
        <Card
          sx={{
            maxWidth: { xs: 1, lg: 1000 },
            margin: { xs: 2.5, md: 3 },
            '& > *': {
              flexGrow: 1,
              flexBasis: '50%'
            },
            backgroundColor: "secondary"
          }}

        >
          <Box alignItems="center">
            <Grid container>
              <Grid item xs={12} md={12}>
                <Typography mt={4} variant="h2">
                  <FormattedMessage id="registerTitle1"/>
                  <strong style={{ color: '#FF5733' }}>
                    {" " + intl.formatMessage({id: 'registerTitle2'}) + " "}
                  </strong>
                  <FormattedMessage id="registerTitle3"/>
                </Typography>
                <Typography variant="body1">
                  {intl.formatMessage({id: 'registerSubTitle'})}
                </Typography>
              </Grid>
            </Grid>
            <Box mt={3} mb={3}>
              <Grid container >
                <Grid item xs={12} md={6} sx={{ borderRight: 1, borderColor: 'grey.500' }}>
                  <Typography mb={4} variant="h3">
                    <FormattedMessage id="personalUser"/>
                  </Typography>
                  <Button variant="outlined" color="iAmSmart"  onClick={registerWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}><Typography variant="h5">
                    <FormattedMessage id="continueWithIAmSmart"/>
                  </Typography></Button>

                  <Box mt={4} ml={2} mr={2} bgcolor="grey.100" p={1.5} >
                    <Typography textAlign='justify' variant="body1" display="block" gutterBottom>
                      你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動憲報刊登公告帳戶。
                      <br />如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。
                    </Typography>
                    <Link href="https://www.iamsmart.gov.hk/tc/">
                      <FormattedMessage id="learnMore"/>
                    </Link>
                  </Box>

                  <Typography m={5}>
                    <FormattedMessage id="or"/>
                  </Typography>

                  <Button href="/registerFrom" variant="contained"><Typography variant="h5">
                    <FormattedMessage id="registerNewPersonalUser"/>
                  </Typography></Button>

                  <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
                    需上載身份證明文件數碼檔案以進行網上申請。
                    <br />如：香港身份證; 護照; 中國內地身份證; 專業執業証書等
                  </Typography>
                </Grid>
                <Grid item xs={12} md={6} sx={{ borderLeft: 1, borderColor: 'grey.500' }}>
                  <Typography mb={4} variant="h3">
                    <FormattedMessage id="businessUser"/>
                  </Typography>
                  <Button href="/registerFromOrganization" variant="contained" sx={{ mt: 0.5 }}><Typography variant="h5">
                    <FormattedMessage id="registerNewBusinessUser"/>
                  </Typography></Button>
                  <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
                    需上載以下任何一份證明文件以進行網上申請。
                    <br />如：商業登記證；專業執業證書
                  </Typography>
                </Grid>
              </Grid>
            </Box>
          </Box>
        </Card >
      </center>
      <Dialog
          open={isPopUp}
          onClose={() => setIsPopUp(false)}
          PaperProps={{
            sx: {
              minWidth: '40vw',
              maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
              maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
            }
          }}
      >
        <DialogTitle></DialogTitle>
        <DialogContent>
          <Typography variant="h3" >
            <FormattedMessage id="authorizeIAmSmartForInfo"/>
          </Typography>
          <Typography variant="h5" style={{ padding: '4px' }}>
            <FormattedMessage id="iAmSmartSubTitle"/>
          </Typography>
        </DialogContent>
        <DialogContent >
          <Grid container style={{ paddingLeft: '16px' }}>
            <Grid item xs={6} >
              <Typography style={{ padding: '4px' }}>
                {"- " + intl.formatMessage({id: 'userChineseName'})}
              </Typography>
              <Typography style={{ padding: '4px' }}>
                {"- " + intl.formatMessage({id: 'userEnglishName'})}
              </Typography>
              <Typography style={{ padding: '4px' }}>
                {"- " + intl.formatMessage({id: 'userIDNo'})}
              </Typography>
            </Grid>
            <Grid item xs={6} >
              <Typography style={{ padding: '4px' }}>
                {"- " + intl.formatMessage({id: 'userEmailAddress'})}
              </Typography>
              <Typography style={{ padding: '4px' }}>
                {"- " + intl.formatMessage({id: 'userPhoneNumber'})}
              </Typography>
              <Typography style={{ padding: '4px' }}>
                {"- " + intl.formatMessage({id: 'userAddress'})}
              </Typography>
            </Grid>
          </Grid>
        </DialogContent>
        <DialogContent align="right">
          <Button variant="outlined" onClick={getQRWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}><Typography variant="h5">
            <FormattedMessage id="iAmSmartAutoFillIn"/>
          </Typography></Button>
          <br/>
          <Link href="https://www.iamsmart.gov.hk/tc/">
            <FormattedMessage id="learnMore"/>
          </Link>
        </DialogContent>
      </Dialog>
    </Stack>
  );

};

export default RegisterCustom;
