import React from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  IconButton,
  useMediaQuery,
  useTheme,
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { DocumentForm } from './DocumentForm';
import type { DocumentRecord } from '../types/documents.types';

interface EditDocumentDialogProps {
  open: boolean;
  onClose: () => void;
  document: DocumentRecord;
}

export const EditDocumentDialog: React.FC<EditDocumentDialogProps> = ({
  open,
  onClose,
  document,
}) => {
  const theme = useTheme();
  const isSmall = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <Dialog
      open={open}
      onClose={onClose}
      fullScreen={isSmall}
      maxWidth="md"
      fullWidth
      PaperProps={{
        sx: {
          maxHeight: isSmall ? '100%' : '90vh',
          m: isSmall ? 0 : 2,
        },
      }}
    >
      {isSmall && (
        <IconButton
          aria-label="close"
          onClick={onClose}
          sx={{
            position: 'absolute',
            right: 8,
            top: 8,
            color: (theme) => theme.palette.grey[500],
            zIndex: 1,
          }}
        >
          <CloseIcon />
        </IconButton>
      )}

      <DialogTitle sx={{ pb: 1 }}>Edit Document</DialogTitle>

      <DialogContent sx={{ pt: 2 }}>
        <DocumentForm
          mode="edit"
          documentId={document.id}
          initialValues={document}
          onSuccess={() => {
            onClose();
          }}
          onCancel={onClose}
        />
      </DialogContent>
    </Dialog>
  );
};

export default EditDocumentDialog;