import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import { Button, Grid, Typography } from '@mui/material';
import DialogActions from '@mui/material/DialogActions';
import * as React from 'react';
import ValidateResultTable from './ValidateResultTable';
import { LIONER_FORM_THEME, CARD_MAX_WIDTH } from '../../themes/themeConst';
import { ThemeProvider } from '@emotion/react';
import { GENERAL_GREEN_COLOR, GENERAL_RED_COLOR } from '../../themes/colorConst';
import MainCard from '../../components/MainCard';
import axios from 'axios';
import { apiPath } from '../../auth/utils';
import { GET_APPRECIATION_IMPORT_ERROR_REPORT, GET_AWARD_IMPORT_ERROR_REPORT } from '../../utils/ApiPathConst';

export function ImportResultWindow({
  isWindowOpen,
  isMultiTable,
  title,
  onNormalClose,
  onConfirmClose,
  validateResult,
  isAppreciation,
  recordCount,
  eventCount,
  applicationCount,
  awardCount,
  recordList,
  setIsUploading
}) {
  function exportReport() {
    setIsUploading(true);
    axios({
      method: 'post',
      url: isMultiTable ? `${apiPath}${GET_AWARD_IMPORT_ERROR_REPORT}` : `${apiPath}${GET_APPRECIATION_IMPORT_ERROR_REPORT}`,
      responseType: 'blob',
      data: {
        errorRecord: recordList
      }
    })
      .then((response) => {
        if (response.status === 200) {
          setIsUploading(false);
          const url = URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', response.headers.filename);
          link.click();
        }
      })
      .catch((error) => {
        setIsUploading(false);
        console.log(error);
        return false;
      });
  }

  return (
    <ThemeProvider theme={LIONER_FORM_THEME}>
      <Dialog
        PaperProps={{
          sx: {
            minWidth: '54vw',
            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '70vh' }
          }
        }}
        open={isWindowOpen}
        onClose={onNormalClose}
        disableEscapeKeyDown={true}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          <Typography variant="lionerBold" component="span">
            {title}
          </Typography>
        </DialogTitle>
        <DialogContent>
          <Grid item xs={12} s={12} md={12} lg={12}>
            <Grid container>
              <Grid item xs={12} s={12} md={12} lg={12} sx={{ mb: 1 }}>
                <Grid container alignItems={'left'}>
                  <Grid item xs={5} sm={4} md={3} lg={3.5} sx={{ display: 'flex', alignItems: 'left' }}>
                    <Typography variant="lionerBold" component="span">
                      Status:
                    </Typography>
                  </Grid>

                  <Grid item xs={6} s={6} md={6} lg={6}>
                    <Typography variant="lionerBold" component="span" sx={{ color: validateResult ? GENERAL_GREEN_COLOR : GENERAL_RED_COLOR }}>
                      {validateResult ? 'Import Success' : 'Validation Fail'}
                    </Typography>
                  </Grid>
                </Grid>

                {isAppreciation ? (
                  <Grid container alignItems={'left'}>
                    <Grid item xs={5} sm={4} md={3} lg={3.5} sx={{ display: 'flex', alignItems: 'left' }}>
                      <Typography variant="lionerBold" component="span">
                        Total number of Record:
                      </Typography>
                    </Grid>

                    <Grid item xs={6} s={6} md={6} lg={6}>
                      <Typography variant="lionerSize" component="span">
                        {recordCount}
                      </Typography>
                    </Grid>
                  </Grid>
                ) : (
                  <>
                    <Grid container alignItems={'left'}>
                      <Grid item xs={5} sm={4} md={3} lg={3.5} sx={{ display: 'flex', alignItems: 'left' }}>
                        <Typography variant="lionerBold" component="span">
                          Total number of Event:
                        </Typography>
                      </Grid>

                      <Grid item xs={6} s={6} md={6} lg={6}>
                        <Typography variant="lionerSize" component="span">
                          {eventCount}
                        </Typography>
                      </Grid>
                    </Grid>

                    <Grid container alignItems={'left'}>
                      <Grid item xs={5} sm={4} md={3} lg={3.5} sx={{ display: 'flex', alignItems: 'left' }}>
                        <Typography variant="lionerBold" component="span">
                          Total number of Application:
                        </Typography>
                      </Grid>

                      <Grid item xs={6} s={6} md={6} lg={6}>
                        <Typography variant="lionerSize" component="span">
                          {applicationCount}
                        </Typography>
                      </Grid>
                    </Grid>

                    <Grid container alignItems={'left'}>
                      <Grid item xs={5} sm={4} md={3} lg={3.5} sx={{ display: 'flex', alignItems: 'left' }}>
                        <Typography variant="lionerBold" component="span">
                          Total number of Award:
                        </Typography>
                      </Grid>

                      <Grid item xs={6} s={6} md={6} lg={6}>
                        <Typography variant="lionerSize" component="span">
                          {awardCount}
                        </Typography>
                      </Grid>
                    </Grid>
                  </>
                )}

                {validateResult ? (
                  <Grid />
                ) : (
                  <Grid container alignItems={'left'}>
                    <Grid item xs={5} s={5} md={5} lg={5} sx={{ mt: 3, display: 'flex', alignItems: 'left' }}>
                      <Typography variant="lionerBold" component="span">
                        Invalid Record Result
                      </Typography>
                    </Grid>
                  </Grid>
                )}
              </Grid>

              {validateResult ? (
                <Grid />
              ) : (
                <Grid item xs={12} s={12} md={12} lg={12}>
                  <MainCard elevation={0} content={false} sx={{ width: CARD_MAX_WIDTH }}>
                    <div style={{ /*height: expanded? '32vh': '76vh',*/ width: '100%' }}>
                      <ValidateResultTable recordList={recordList} isMultiTable={isMultiTable} />
                    </div>
                  </MainCard>
                </Grid>
              )}
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          {validateResult ? (
            <Grid />
          ) : (
            <Button onClick={exportReport} autoFocus>
              Export
            </Button>
          )}

          <Button onClick={onConfirmClose} autoFocus>
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </ThemeProvider>
  );
}
