import {
  useEffect,
  useState
} from "react";

// material-ui
import {
  Grid,
  Typography,
  Stack,
  Box,
  Button
} 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 TabTableDetail = Loadable(lazy(() => import('./tabTableDetail/TabTable')));
import {
  GET_PUBLIC_NOTICE_APPLY_DETAIL,
  SET_PUBLIC_NOTICE_STATUS_CANCELLED
} from "utils/ApiPathConst";
import { useNavigate } from "react-router-dom";
const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog')));
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';

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

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

  //statusWindow
  const [open, setOpen] = useState(false);
  const [getStatus, setStatus] = useState("");
  const [statusWindowAccepted, setStatusWindowAccepted] = useState(false);

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

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

  const loadApplicationDetail = () => {
    if (params.id > 0) {
      axios.get(`${GET_PUBLIC_NOTICE_APPLY_DETAIL}/${params.id}`)
        .then((response) => {
          if (response.status === 200) {
            setApplicationDetailData(response.data);
            setAapNo(response.data.data.appNo);
          }
        })
        .catch(error => {
          console.log(error);
          return false;
        });
    }
  }

  useEffect(() => {
    if (applicationDetailData.data === null) {
      navigate('/publicNotice');
    }
  }, [applicationDetailData]);

  const handleClose = () => {
    setOpen(false);
    setStatus("")
    setStatusWindowAccepted(false)
  };

  useEffect(() => {
    if (statusWindowAccepted) {
      if (getStatus == "cancel") {
        onCancelledClick()
      }
    }
  }, [statusWindowAccepted]);

  useEffect(() => {
    // console.log(getStatus)
    if (getStatus !== "") {
      setOpen(true)
    }
  }, [getStatus]);

  const onCancelledClick = () => {
    if (params.id > 0) {
      axios.get(`${SET_PUBLIC_NOTICE_STATUS_CANCELLED}/${params.id}`)
        .then((response) => {
          if (response.status === 204) {
            setOpen(false);
            handleClose();
            loadApplicationDetail()
          }
        })
        .catch(error => {
          console.log(error);
          return false;
        });
    }
  };

  return (
    <Grid container sx={{ minHeight: '110vh', backgroundColor: '#ffffff' }} direction="column">
      <StatusChangeDialog open={open} handleClose={handleClose} setStatusWindowAccepted={setStatusWindowAccepted} getStatus={getStatus} />
      <Grid item xs={12}>
        <div style={BackgroundHead}>
          <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
            <Typography ml={15} color='#FFF' variant="h4">我的公共啟事</Typography>
          </Stack>
        </div>
      </Grid>
      <Grid item xs={12} >
        <Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center">
          <Typography ml={3} mt={3} variant="h4">我的公共啟事 / {appNo}</Typography>
        </Stack>
      </Grid>

      <Grid item xs={12} md={12}>
        <Grid container direction="column" justifyContent="flex-start" alignItems="center">
          <Grid item xs={12} width="75%">
            <Button sx={{ mt: 4 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/publicNotice") }}>
              <KeyboardBackspaceOutlinedIcon />
              <Typography variant="h4">Back</Typography>
            </Button>
          </Grid>
          {/* <Grid item xs={12} md={12} > */}
          {/* <Grid container direction="column" alignItems="center"> */}
          <Grid item width="75%">
            <Box xs={12} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
              <ApplicationDetailCard
                setStatus={setStatus}
                applicationDetailData={applicationDetailData}
              // isCollectData={isCollectData}
              // isNewRecord={isNewRecord}
              />
            </Box>
          </Grid>
          {/* <Grid item xs={12} md={12} width="85%">
                <Box xs={12} mt={3}>
                  <TabTableDetail applicationDetailData={applicationDetailData}/>
                </Box>
              </Grid> */}
          {/* </Grid> */}
          {/* </Grid> */}
        </Grid>

      </Grid>
    </Grid>
  );
};

export default DashboardDefault;