import * as React from 'react';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import { memo, useContext } from 'react';
import _ from 'lodash';
import { useJsonForms } from '@jsonforms/react';
import { DataContext } from '../context/Context';
import { Box } from '@mui/system';
import { IconButton, Typography } from '@mui/material';
import Grid from '@mui/material/Grid2';
import CloseButton from '../assets/PopupCloseButton';
import Button from '@mui/material/Button';

const FileDeleteConformationDialog = memo(function (props: any) {
 const { confirmDialog, setConfirmDialog, path, uischema } = props;
 const uischemaData = uischema.config.main;
 const { theme, serviceProvider } = useContext(DataContext);
 const ctx = useJsonForms();
 const callServiceProvider = (event: any) => {
  serviceProvider(
   ctx,
   {
    ...uischemaData,
    onFileDelete: uischemaData.onFileDelete || 'onFileDelete',
   },
   {
    event: { _reactName: 'onFileDelete' },
    tableButtonPath: path.split('.')[path.split('.').length - 1],
    path,
    ...uischemaData.additionalData,
    setConfirmDialog,
   },
  )
   .then(() => {
    setConfirmDialog(false);
   })
   .catch((err) => {
    setConfirmDialog(false);
   });
 };
 return (
  <React.Fragment>
   <Dialog
    open={confirmDialog}
    fullScreen={false}
    fullWidth={true}
    maxWidth={'sm'}
    sx={{
     '& .MuiPaper-root': {
      width: { xs: '75%', md: '25%' },
      borderRadius: '12px',
     },
     '& .MuiTypography-root': {
      padding: 0,
     },
     ...uischema.config?.style?.dialogStyle
    }}
    aria-labelledby='draggable-dialog-title'
   >
    <Box
     sx={{
      display: 'flex',
      justifyContent: 'end',
     }}
    >
     <IconButton
      sx={{
       padding: '2px',
       color: 'transparent',
       '&:hover': {
        backgroundColor: 'transparent',
        color: theme.myTheme.palette.grey[300],
       },
      }}
      onClick={() => setConfirmDialog(false)}
     >
      <CloseButton color={theme.myTheme.palette.grey[600]} />
     </IconButton>
    </Box>
    <DialogTitle id='draggable-dialog-title'>
     <Box
      sx={{
       display: 'flex',
       alignItems: 'center',
      }}
     >
      <Box
       sx={{
        flexGrow: 1,
        textAlign: 'center',
        fontWeight: 'Bold',
        fontSize: '24px',
       }}
      >
       WARNING !!
      </Box>
     </Box>
    </DialogTitle>
    <Grid
     container
     rowSpacing={2}
     columnSpacing={2}
     spacing={2}
     size={{
      xs: 11.8,
      sm: 11.8,
      md: 11.5,
     }}
     sx={{
      justifyContent: 'space-around',
      width: { xs: '100%', sm: '100%', md: '98%' },
      margin: '8px auto ',
      background: 'inherit',
      borderRadius: '20px',
      paddingBottom: '10px',
     }}
    >
     <Typography
      sx={{
       width: '80%',
       margin: 'auto',
       textAlign: 'center',
       fontSize: '18px',
       marginBottom: '40px',
        ...uischema.config?.style?.dialogLabel
      }}
     >
      Are you sure you want to delete this file ?
     </Typography>
     <Button
      onClick={() => setConfirmDialog(false)}
      sx={{
       position: 'absolute',
       padding: '8px 0px',
       fontSize: '16px',
       bottom: 0,
       left: 0,
       width: '50%',
       borderRadius: 0,
       boxShadow: 0,
       backgroundColor: 'transparent',
       color: theme.myTheme.palette.primary.main,
       borderTop: `0.5px solid ${theme.myTheme.palette.grey[600]}`,
       borderRight: `0.5px solid ${theme.myTheme.palette.grey[600]}`,
       '&:hover': {
        color: theme.myTheme.palette.primary.contrastText,
        backgroundColor: theme.myTheme.palette.primary.main,
        boxShadow: 'none',
       },
        ...uischema.config?.style?.dialogNoButton
      }}
     >
      No
     </Button>
     <Button
      onClick={(e) => callServiceProvider(e)}
      sx={{
       position: 'absolute',
       padding: '8px 0px',
       fontSize: '16px',
       bottom: 0,
       right: 0,
       width: '50%',
       borderRadius: 0,
       boxShadow: 0,
       backgroundColor: 'transparent',
       color: theme.myTheme.palette.error.main,
       borderTop: `0.5px solid ${theme.myTheme.palette.grey[600]}`,
       '&:hover': {
        color: theme.myTheme.palette.error.contrastText,
        backgroundColor: theme.myTheme.palette.error.main,
        boxShadow: 'none',
       },
        ...uischema.config?.style?.dialogYesButton
      }}
     >
      YES
     </Button>
    </Grid>
   </Dialog>
  </React.Fragment>
 );
});
export default FileDeleteConformationDialog;