// import { useState } from 'react';

// material-ui
import {
  Grid,
  Typography,
  Stack,
  Button,
  Box
} from '@mui/material';
import { isORGLoggedIn, } from "utils/Utils";
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import {FormattedMessage} from "react-intl";
import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
import * as React from "react";
import Loadable from 'components/Loadable';
const Message = Loadable(React.lazy(() => import('./Message')));
const Notice = Loadable(React.lazy(() => import('./Notice')));

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const DashboardDefault = () => {
  const userData = JSON.parse(localStorage.getItem("userData"));
  const BackgroundHead = {
    // backgroundColor: '#0d47a1',
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
  }
  return (
    <Grid container sx={{ minHeight: '90vh' }} direction="column">
      <Grid item xs={12} >
        <div style={BackgroundHead}>
          <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
            {/* <Typography variant="h5">我的公共啟事</Typography> */}
            <Typography color='#FFF' variant="h5" sx={{ ml:10, display:{ xs: 'none', sm:'none', md:'block'}}}>
              {isORGLoggedIn() ?userData.fullenName:userData.fullchName}, <FormattedMessage id="welcomeMsg"/>
            </Typography>
          </Stack>
        </div>
      </Grid>
      <Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
        <Grid container justifyContent="center" spacing={2} sx={{ pt: 2 }} alignitems="stretch" >
          <Grid item xs={12} lg={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
            <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #e1edfc', borderRadius: '10px', backgroundColor: "#e1edfc" }} >
              <Stack direction="row" spacing={2}>
                <AdsClickRoundedIcon />
                <Stack direction="column" alignItems="start">
                  <Typography variant="h4" >
                    <FormattedMessage id="submitApplication" />
                  </Typography>
                  <Typography >
                    <FormattedMessage id="applicationSubheading" />
                  </Typography>
                </Stack>
              </Stack>
            </Box>
            <Stack direction="row" justifyContent="space-between" sx={{ pl: 2, pr: 2, pt: 2 }} >
              <Typography variant="h4">
                <FormattedMessage id="announcement" />
              </Typography>
              <Button color="gray"><u>
                <FormattedMessage id="viewAllAnnouncement" />
              </u></Button>
            </Stack>
            <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
              <Notice
              />
            </Box>
          </Grid>
          <Grid item xs={12} lg={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
            <Stack direction="row" justifyContent="space-between" sx={{ pl: 2, pr: 2, pt: 2 }} >
              <Typography variant="h4">
                <FormattedMessage id="systemMessage" />
              </Typography>
              <Button color="gray"><u>
                <FormattedMessage id="viewAllSystemMessage" />
              </u></Button>
            </Stack>
            <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
              <Message
              />
            </Box>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};

export default DashboardDefault;