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, useIntl } from "react-intl";
import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
import * as React from "react";
import Loadable from 'components/Loadable';
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import * as DateUtils from "utils/DateUtils";

const Message = Loadable(React.lazy(() => import('./Message')));
const Notice = Loadable(React.lazy(() => import('./Notice')));
// import { lazy } from 'react';

const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent')));

import { useNavigate } from "react-router-dom";

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

const DashboardDefault = () => {
  const navigate = useNavigate()
  const intl = useIntl();
  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'
  }

  const { locale } = intl;
  const [messageOnReady, setMessageOnReady] = useState(false);
  const [onNoticeReady, setNoticeOnReady] = useState(false);
  const [isLoading, setLoding] = useState(true);
  const [itemList, setItemList] = React.useState([]);
  const [listData, setListData] = React.useState([]);

  React.useEffect(() => {
    loadMessageData()
    loadNoticeData()
    localStorage.setItem('searchCriteria',"")
  }, []);

  const getWelcomeMsg=()=>{
    
    var current = new Date()
    var curHr = current.getHours()

    if (curHr < 12) {
      return <FormattedMessage id="welcomeMsg_am" />
    } else if (curHr < 18) {
      return <FormattedMessage id="welcomeMsg_pm" />
    } else {
      return <FormattedMessage id="welcomeMsg_night" />
    }
  }

  React.useEffect(() => {
    // console.log(messageOnReady)
    // console.log(onNoticeReady)
    if(messageOnReady&&onNoticeReady){
      setLoding(false)
      // console.log(123)
    }
  }, [messageOnReady,onNoticeReady]);

  const loadMessageData = () => {
    HttpUtils.get({
        url: UrlUtils.GET_MSG_DASHBOARD,
        onSuccess: function (response) {
            let list = []
            response.map((item) => {
                list.push(
                    <Button onClick={()=>{navigate("/msg/details/"+item.id);}} color={item.readTime?"gray":"black"} style={{justifyContent: "flex-start"}} sx={{p:2}}>
                        <Stack direction="column" >
                            <Typography variant='string' align="justify"><b>{item.subject}</b></Typography>
                            <Typography align="justify">{DateUtils.datetimeStr(item.sentDate)}</Typography>
                        </Stack>
                    </Button>
                )
            });

            setItemList(list);
            setMessageOnReady(true);
            // console.log('123')
        },
        onError: function (){
            // console.log('123')
            setMessageOnReady(true);
        }
    });
    // props.setMessageOnReady(true);

  };

  const loadNoticeData = () => {
    HttpUtils.get({
        url: UrlUtils.GET_ANNOUNCE_DASHBOARD,
        onSuccess: function (response) {
            setListData(response);
            setNoticeOnReady(true)
        },
        onError: function () {
            setNoticeOnReady(true)
        }
    });
  };

  return (
        isLoading ?
          <Grid container sx={{ minHeight: '87vh' }} 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: (locale === 'en' ?userData.fullenName: userData.fullchName)}, {getWelcomeMsg()}
                  </Typography>
                </Stack>
              </div>
            </Grid>
            <Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
              <Grid container sx={{ minHeight: '75vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        :
        <Grid container sx={{ minHeight: '87vh' }} 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: (locale === 'en' ?userData.fullenName: userData.fullchName)}, {getWelcomeMsg()}
                </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%' }}>
                <Button
                  xs={12} onClick={() => { navigate("/publicNotice/apply"); }}
                  style={{ justifyContent: "flex-start" }}
                  aria-label={intl.formatMessage({ id: 'submitApplication' })}
                  sx={{ width: "100%", 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>
                </Button>
                <Stack direction="row" justifyContent="space-between" sx={{ pl: 2, pr: 2, pt: 2 }} >
                  <Typography variant="h4">
                    <FormattedMessage id="announcement" />
                  </Typography>
                  <Button
                    color="gray"
                    aria-label={intl.formatMessage({ id: 'viewAllAnnouncement' })}
                    onClick={()=>{navigate("/announcement/search")}}
                  ><u>
                      <FormattedMessage id="viewAllAnnouncement" />
                    </u></Button>
                </Stack>
                <Box xs={12} md={12} sx={{ p: 1, border: '3px solid #eee', borderRadius: '10px' }} >
                  <Notice
                    listData = {listData}
                  />
                </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
                    aria-label={intl.formatMessage({ id: 'viewAllSystemMessage' })}
                    onClick={() => { navigate("/msg/search"); }}
                    color="gray"
                  ><u>
                      <FormattedMessage id="viewAllSystemMessage" />
                    </u></Button>
                </Stack>
                <Box xs={12} md={12} sx={{ p: 1, fontSize: 12, border: '3px solid #eee', borderRadius: '10px' }} >
                  <Message 
                    itemList = {itemList}
                  />
                </Box>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
  );
};

export default DashboardDefault;