import PropTypes from 'prop-types';

// material-ui
import { Box, Grid,Typography } from '@mui/material';

// project import
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const AuthCard = Loadable(lazy(() => import('./AuthCardCustom')));
//import AuthCard from './AuthCard';

// assets
// import AuthBackground from 'assets/images/auth/AuthBackground';
// import backgroundImage from 'assets/images/hero-printing.png';
import backbroundImg from 'assets/images/bg_ml.jpg'
import 'assets/style/loginStyles.css'
import { Stack } from '../../../node_modules/@mui/material/index';
import {FormattedMessage} from "react-intl";
const BackgroundHead = {
  backgroundImage: `url(${backbroundImg})`,
  width: '100%',
  height: '100%',
  backgroundSize:'cover'
}
import {
  checkSysEnv
} from "utils/Utils";

// ==============================|| AUTHENTICATION - WRAPPER ||============================== //

const AuthWrapper = ({ children }) => (
  <Box sx={{ minHeight: '87vh' }}>
    {/* <AuthBackground /> */}
    {/* <img src={banner} alt="banner" width="100%" /> */}
    <div style={BackgroundHead}>
      <Grid
        container
        direction="row"
        justifyContent="space-between"
        alignItems="center"
        sx={{
          minHeight: '87vh'
        }}
      >
        <Grid item xs={11}>
          <Stack direction="row"
            justifyContent="space-between"
            alignItems="center"
            spacing={2}>
            <Grid item xs={12} md={8} lg={8} xl={9} sx={{ ml: 4, mt: 3 ,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
              item
              xs={12}
              md={4}
              lg={4}
              xl={4}
              container
              justifyContent="right"
              alignItems="center"
              sx={{ minHeight: { xs: 'calc(90vh - 134px)', md: 'calc(90vh - 112px)' } }}
            >
              <Grid item>
                <AuthCard>{children}</AuthCard>
              </Grid>
            </Grid>
          </Stack>
        </Grid>
      </Grid>
    </div>
    {/* <AuthFooter/> */}
  </Box>
);

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

export default AuthWrapper;