
import {
  Grid,
  Typography,
  Stack,
  Box
} from '@mui/material';
import Loadable from 'components/Loadable';
import * as React from 'react';
import { useParams } from "react-router-dom";
import * as HttpUtils from "utils/HttpUtils";
import * as DateUtils from "utils/DateUtils";
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent')));
const DnDetailCard = Loadable(React.lazy(() => import('./DnDetailCard')));
const ApplicationDetailCard = Loadable(React.lazy(() => import('./ApplicationDetailCard')));
const GazetteDetailCard = Loadable(React.lazy(() => import('./GazetteDetailCard')));
const ClientDetailCard = Loadable(React.lazy(() => import('./ClientDetailCard')));
import {
  DEMAND_NOTE_LOAD,
} from "utils/ApiPathConst";
// ==============================|| Body - DEFAULT ||============================== //

const DemandNote_index = () => {
  const params = useParams();
  const [data, setData] = React.useState({});
  const [isLoading, setLoading] = React.useState(false);
  

  const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
  }

  React.useEffect(() => {
    loadApplicationDetail();
  }, []);


  const loadApplicationDetail = () => {
    if (params.id > 0) {
      HttpUtils.get({
        url: `${DEMAND_NOTE_LOAD}/${params.id}`,
        onSuccess: (response) => {
         
            response["issueDate"] = DateUtils.dateStr(response["issueDate"]);
            response["sentDate"] = response["sentDate"]?DateUtils.datetimeStr(response["sentDate"]):"";
            response["dueDate"] = DateUtils.dateStr(response["dueDate"]);
            response["gazetteIssueDate"] = DateUtils.datetimeStr(response["gazetteIssueDate"]);
            response["contactFaxNo"] =JSON.parse(response["contactFaxNo"]);
            response["contactTelNo"] =JSON.parse(response["contactTelNo"]);
            response["contactTel"] =JSON.parse(response["contactTel"]);
            setData(response);
            setLoading(false);
        }
      });
    }
  }

  return (
    <Grid container sx={{ maxHeight: '500vh', backgroundColor: 'backgroundColor.default' }} 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">Demand Note</Typography>
          </Stack>
        </div>
      </Grid>

      <Grid item xs={12} >
        <Grid container direction="row">
          <Grid item xs={12} md={9} lg={9} xl={9}>
            <Grid container direction="column">
              <Grid item xs={12} md={10} lg={10} xl={10}>
                <Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                    <DnDetailCard data={data}/>
                </Box>
              </Grid>
              <Grid item xs={12} md={10} lg={10} xl={10}>
                <Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                  {isLoading && editMode ?
                    <LoadingComponent /> :
                    <ApplicationDetailCard
                      data={data}
                    />
                  }
                </Box>
              </Grid>
              <Grid item xs={12} md={10} lg={10} xl={10}>
                <Box xs={12} ml={4} mt={3} sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                  <GazetteDetailCard
                    data={data}
                  />
                </Box>
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs={12} md={3} lg={3} xl={3}>
            <Grid container>
              <Grid item xs={12} md={12}>
                <Box xs={12} md={12} ml={3} mt={3} mr={1} height='800px' sx={{ p: 2, borderRadius: '10px', backgroundColor: '#ffffff' }}>
                  <ClientDetailCard
                    data={data}
                  />
                </Box>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );

}

export default DemandNote_index;

