// material-ui
import {
    Grid,
    Typography,
    Stack
} from '@mui/material';
// import MainCard from "components/MainCard";
import * as UrlUtils from "utils/ApiPathConst";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
// import * as DateUtils from "utils/DateUtils";

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
// const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

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

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

const Index = () => {

    // const [record,setRecord] = React.useState([]);
    const [searchCriteria, setSearchCriteria] = React.useState({
        // dateTo: DateUtils.dateStr(new Date()),
        // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
    });
    const [onReady] = React.useState(true);
    const [onDownload, setOnDownload] = React.useState(false);

    // React.useEffect(() => {
    //     setOnReady(true);
    // }, [record]);

    React.useEffect(() => {
        if (Object.keys(searchCriteria).length > 0){
            console.log(searchCriteria)
            loadGrid();
        }
    }, [searchCriteria]);

    function loadGrid(){
        HttpUtils.get({
            url: UrlUtils.VIEW_RECON_REPORT,
            params: searchCriteria,
            onSuccess: function(responseData){
                console.log(responseData)
                var myWindow = window.open();
                myWindow.document.write(responseData);
            }
        });
    }

    function downloadXML(input) {
        // console.log(input)
        setOnDownload(true)
        HttpUtils.fileDownload({
            url: UrlUtils.GEN_RECON_REPORT,
            params:input,
            onResponse:(response)=>{
                console.log(response)
                setOnDownload(false)
            },
            onError:()=>{
                setOnDownload(false)
            }
          });
        // open(UrlUtils.GEN_GFMIS_XML + "/today?online=true") 
      }


    function applySearch(input) {
        setSearchCriteria(input);
    }

    function generateReport(input) {
        downloadXML(input);
    }

    return (
        !onReady ?
            <LoadingComponent/>
            :
            <Grid container sx={{minHeight: '87vh', 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">
                            Recon Report
                            </Typography>
                        </Stack>
                    </div>
                </Grid>
                {/*row 1*/}
                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                    <SearchForm 
                    applySearch={applySearch}
                    generateReport={generateReport}
                    searchCriteria={searchCriteria}
                    onDownload={onDownload}
                    />
                </Grid>
                {/*row 2*/}
            </Grid>
    );
};

export default Index;