// 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 { iAmSmartPath, clientId, getBowserType, isAppBowser, iAmSmartCallbackPath } from 'auth/utils'
import { IAmSmartButton } from "components/iAmSmartButton";

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

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

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

  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=" + (locale === 'en' ? "en-US" : locale === 'zh-HK' ? "zh-HK" : "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=" + (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 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 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"><Typography variant="h5">
                    <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 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>
                    <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;