

// material-ui
import {
  Dialog, DialogTitle, DialogContent,
  Link, Button, Card, Box, Grid
} from '@mui/material';
import Typography from '@mui/material/Typography';
import banner from 'assets/images/bg_ml.jpg';
import { Stack } from '../../../node_modules/@mui/material/index';
import { getBowserType, isAppBowser, iAmSmartCallbackPath } from 'auth/utils'
import { IAmSmartButton } from "components/iAmSmartButton";

import * as HttpUtils from "utils/HttpUtils";
import { I_AM_SMART_PATH } from "utils/ApiPathConst";

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

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

const RegisterCustom = () => {
  const [isPopUp, setIsPopUp] = React.useState(false);
  const intl = useIntl();
  const { locale } = intl;

  // Localized document title/meta on register landing page
  usePageTitle("register");

  const registerWithIAmSmart = () => {
    getQRWithIAmSmart();
    setIsPopUp(false);
  }

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

  const openQR = () => {
    let callbackUrl = "https://" + iAmSmartCallbackPath() + "/iamsmart/registrycallback";

    HttpUtils.get({
      url: I_AM_SMART_PATH,
      onSuccess: (responseData) => {
        let url = responseData.iAmSmartPath + "/api/v1/auth/getQR"
          + "?clientID=" + responseData.ci
          + "&responseType=code"
          + "&source=" + getBowserType()
          + "&redirectURI=" + encodeURIComponent(callbackUrl)
          + "&scope=" + encodeURIComponent("eidapi_auth eidapi_profiles")
          + "&lang=" + (locale === 'en' ? "en-US" : locale === 'zh-HK' ? "zh-HK" : "zh-CN")
          //+"&state="
          + "&brokerPage=true"
        window.location.assign(url);
      }
    });


  }

  const openApp = () => {
    //not support open app, just call QR link
    let callbackUrl = "https://" + iAmSmartCallbackPath() + "/iamsmart/registrycallback";
    
    HttpUtils.get({
      url: I_AM_SMART_PATH,
      onSuccess: (responseData) => {
        let url = responseData.iAmSmartPath + "/api/v1/auth/getQR"
          + "?clientID=" + responseData.ci
          + "&responseType=code"
          + "&source=" + getBowserType()
          + "&redirectURI=" + encodeURIComponent(callbackUrl)
          + "&scope=" + encodeURIComponent("eidapi_auth eidapi_profiles")
          + "&lang=" + (locale === 'en' ? "en-US" : locale === 'zh-HK' ? "zh-HK" : "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 component="h1" mt={4} variant="h3">
                  <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 component="h2" mb={4} variant="h3">
                    <FormattedMessage id="personalUser" />
                  </Typography>
                  <IAmSmartButton
                    label={intl.formatMessage({ id: 'continueWithIAmSmart' })}
                    onClickFun={registerWithIAmSmart}
                  />
                  <Box mt={4} ml={2} mr={2} bgcolor="grey.100" p={1.5} >
                    <Typography textAlign='justify' variant="body1" display="block" gutterBottom>
                      <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.registerIAmSmart' }) }} />
                    </Typography>
                    <Link href={intl.formatMessage({ id: "iamsmartLink" })}>
                      <FormattedMessage id="learnMore" />
                    </Link>
                  </Box>

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

                  <Button
                    href="/registerFrom"
                    variant="contained"
                    sx={{
                      backgroundColor: '#0c489e',
                      color: '#FFFFFF',
                      border: '1px solid #0c489e',
                      boxShadow: 'none',
                      '&:hover': {
                        backgroundColor: '#1565c0',
                        color: '#FFFFFF',
                        border: '1px solid #1565c0',
                        boxShadow: 'none',
                      },
                    }}
                  >
                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                      <FormattedMessage id="registerNewPersonalUser" />
                    </Typography>
                  </Button>

                  <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
                    <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.registerPersonal' }) }} />
                  </Typography>
                </Grid>
                <Grid item xs={12} md={6} sx={{ borderLeft: 1, borderColor: 'grey.500' }}>
                  <Typography component="h2" mb={4} variant="h3">
                    <FormattedMessage id="businessUser" />
                  </Typography>
                  <Button
                    href="/registerFromOrganization"
                    variant="contained"
                    sx={{
                      mt: 0.5,
                      backgroundColor: '#0c489e',
                      color: '#FFFFFF',
                      border: '1px solid #0c489e',
                      boxShadow: 'none',
                      '&:hover': {
                        backgroundColor: '#1565c0',
                        color: '#FFFFFF',
                        border: '1px solid #1565c0',
                        boxShadow: 'none',
                      },
                    }}
                  >
                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                      <FormattedMessage id="registerNewBusinessUser" />
                    </Typography>
                  </Button>
                  <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
                    <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.registerOrg' }) }} />
                  </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">

          <IAmSmartButton
            label={intl.formatMessage({ id: 'iAmSmartAutoFillIn' })}
            onClickFun={getQRWithIAmSmart}
          />
          <br />
          <Link href={intl.formatMessage({ id: "iamsmartLink" })}>
            <FormattedMessage id="learnMore" />
          </Link>
        </DialogContent>
      </Dialog>
    </Stack>
  );

};

export default RegisterCustom;
