import {
  useEffect,
  useState
  } from "react";

// material-ui
import {
  Grid,
  Typography,
  Stack,
  Box
} from '@mui/material';
import Loadable from 'components/Loadable';
import { lazy } from 'react';
import {
  // useNavigate,
  useParams
} from "react-router-dom";
import axios from "axios";

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const ApplicationDetailCard = Loadable(lazy(() => import('./ApplicationDetailCard')));
const GazetteDetailCard = Loadable(lazy(() => import('./GazetteDetailCard')));
const ClientDetailCard = Loadable(lazy(() => import('./ClientDetailCard')));
const TabTableDetail = Loadable(lazy(() => import('./tabTableDetail/TabTable')));
import {
  GET_PUBLIC_NOTICE_APPLY_DETAIL,
} from "utils/ApiPathConst";


// ==============================|| Body - DEFAULT ||============================== //

const DashboardDefault = () => {
  const params = useParams();
  const [applicationDetailData, setApplicationDetailData] = useState({});
  // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({});

  const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize:'cover'
  }
  const appNo = "G2023-343"
  const gazetteIssue = "2023 Vol 027"
  const issueNo = "No. 36"
  const issueDate = "A001"

  useEffect(() => {
    if(params.id > 0 ){
        axios.get(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`)
            .then((response) => {
                if (response.status === 200) {
                  setApplicationDetailData(response.data);
                  // setRefApplicationDetailData(response.data);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }
  }, []);

  return (
    <Grid container sx={{maxnHeight: '500vh',backgroundColor:'#ffffff'}} direction="column">
      <Grid item xs={12}>
        <div style={BackgroundHead}>
          <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
            <Typography ml={15} color='#FFF' variant="h4">Application</Typography>
          </Stack>
        </div>
      </Grid>
      <Grid item xs={12} >
          <Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center">
            <Typography ml={4} mt={3} variant="h4">Application / {appNo}, {gazetteIssue}, {issueNo} , {issueDate}</Typography>
          </Stack>
      </Grid>
      <Grid item xs={12} >
        <Grid container direction="row">
          <Grid item xs={12} md={10}>
            <Grid container direction="column">
              <Grid item>
                <Box xs={12} ml={4} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
                  <ApplicationDetailCard 
                    // updateUserObject={updateUserObject}
                    applicationDetailData={applicationDetailData}
                    // isCollectData={isCollectData}
                    // isNewRecord={isNewRecord}
                  />
                </Box>
              </Grid>
              <Grid item xs={12}>
                <Box xs={12} ml={4} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
                  <GazetteDetailCard 
                    // updateUserObject={updateUserObject}
                    applicationDetailData={applicationDetailData}
                    // isCollectData={isCollectData}
                    // isNewRecord={isNewRecord}
                  />
                </Box>
              </Grid>
              <Grid item xs={12}>
                <Box xs={12} ml={4} mt={3}>
                  <TabTableDetail />
                </Box>
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs={12} md={2} lg={2}>
            <Grid container>
              <Grid item xs={12}>
                <Box ml={1} mt={3} mr={1} height='800px' sx={{ p: 2, border: '3px groove grey', borderRadius: '10px'}}>
                  <ClientDetailCard 
                    // updateUserObject={updateUserObject}
                    applicationDetailData={applicationDetailData}
                    // isCollectData={isCollectData}
                    // isNewRecord={isNewRecord}
                  />
                </Box>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
          
      </Grid>
    </Grid>
  );
};

export default DashboardDefault;