import PropTypes from 'prop-types';
import { Box, Grid, Typography } from '@mui/material';
// import { Stack } from '@mui/material';
import Loadable from 'components/Loadable';
import { lazy,  } from 'react';
import { FormattedMessage, useIntl } from "react-intl";
import { checkSysEnv, checkPaymentSuspention } from "utils/Utils";
import backbroundImg from 'assets/images/bg_ml.jpg';
import 'assets/style/loginStyles.css';

const AuthCard = Loadable(lazy(() => import('./AuthCardCustom')));

const BackgroundHead = {
  backgroundImage: `url(${backbroundImg})`,
  width: '100%',
  height: '100%',
  backgroundSize: 'cover'
};

const AuthWrapper = ({ children }) => {
  // Move useIntl inside component
  const intl = useIntl();

  return (
    <Box sx={{ minHeight: '87vh' }}>
      <div style={BackgroundHead}>
        <Grid
          container
          direction="row"
          justifyContent="space-between"
          alignItems="center"
          sx={{
            minHeight: '87vh'
          }}
        >
          <Grid item xs={12} md={8} lg={8} xl={8} >
            <Grid container direction="column"
              justifyContent="flex-start"
              alignItems="flex-start"
              // spacing={2}
              sx={{ minHeight: { md: 'calc(87vh)' } }}
            >
              <Grid item xs={12} sx={{ ml: 4,}}>
              {checkPaymentSuspention()?
                <Typography style={{ textAlign: "flex-start" }}>
                  <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "suspensionMessageText" }) }} />
                </Typography>
              :
                <Typography style={{ textAlign: "flex-start" }}>
                  <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "homePageHeaderMessage" }) }} />
                </Typography>
              }
              </Grid>
              <Grid container direction="column"
              justifyContent="flex-start"
              alignItems="center"
              spacing={2}
              sx={{ minHeight: { md: 'calc(50vh)' } }}
              >
                <Grid item xs={12} sx={{ ml: 4, mt: 12, display: { xs: 'none', sm: 'block' } }}>
                  <Typography style={{ textAlign: "center", fontSize: "1.8rem" }}>
                    <FormattedMessage id="HKSARGOV" />
                  </Typography>
                  <Typography style={{ textAlign: "center", fontSize: "1.8rem" }}>
                    <FormattedMessage id="Gazette" />
                  </Typography>
                  <Typography style={{ textAlign: "center", fontSize: "1.8rem" }}>
                    <FormattedMessage id="PNSPS_fullname" />
                  </Typography>
                  {
                    checkSysEnv() !== '' ?
                      <Typography style={{ color: 'red', textAlign: "center", fontSize: "1.8rem" }}>
                        User Acceptance Test Environment
                      </Typography>
                      : ""
                  }
                </Grid>

              </Grid>
            </Grid>
          </Grid>
            <Grid item xs={12} md={4} lg={4} xl={4}>
              <Grid
                container
                justifyContent="center"
                alignItems="center"
                sx={{ minHeight: { xs: 'calc(90vh - 134px)', md: 'calc(90vh - 112px)' }, }}
              >
                <Grid item xs={12} md={11} lg={11} xl={11}>
                  <AuthCard>{children}</AuthCard>
                </Grid>
              </Grid>
            </Grid>
        </Grid>
      </div>
    </Box>
  );
};

AuthWrapper.propTypes = {
  children: PropTypes.node
};

export default AuthWrapper;