import React, { useState, useEffect } from 'react';
import {
  Box,
  Typography,
  Button,
  Modal,
  TextField,
} from "@mui/material";
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { Search } from '@mui/icons-material';
import './DirectorySearchModal.css';

interface DirectorySearchModalProps {
  dir: string;
  open: boolean;
  onClose: () => void;
  modalId: string;
}

interface FileData {
  id: number;
  filePath: string;
  fileName: string;
  fileExtension: string;
  createdAt: string;
  modifiedAt: string;
  accessedAt: string;
  size: number;
}

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 50 },
  { field: 'filePath', headerName: 'File Path', width: 250 },
  { field: 'fileName', headerName: 'File Name', width: 150 },
  { field: 'fileExtension', headerName: 'File Extension', width: 100 },
  { field: 'createdAt', headerName: 'Created At', width: 150 },
  { field: 'modifiedAt', headerName: 'Modified At', width: 150 },
  { field: 'accessedAt', headerName: 'Accessed At', width: 150 },
  { field: 'size', headerName: 'Size', width: 70 },
];

const DirectorySearchModal: React.FC<DirectorySearchModalProps> = ({ dir, open, onClose, modalId }) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [rows, setRows] = useState<FileData[]>([]);

  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(event.target.value);
  };

  useEffect(() => {
    const fetchFileData = async () => {
      window.electron.getDocuments().then((response) => {
        if (response.success && response.data) {
          const filesInDirectory = response.data.filter(doc => doc.path.startsWith(dir));
          const fileData: FileData[] = filesInDirectory.map((doc, index) => ({
            id: index + 1,
            filePath: doc.path,
            fileName: doc.path.split(/[/\\]/).pop() || '',
            fileExtension: doc.path.split('.').pop() || '',
            createdAt: doc.createdAt || '',
            modifiedAt: doc.modifiedAt || '',
            accessedAt: doc.accessedAt || '',
            size: doc.size || 0,
          }));
          setRows(fileData);
        }
      });
    };

    fetchFileData();
  }, [dir]);

  const filteredRows = rows.filter((row) => {
    return (
      row.filePath.toLowerCase().includes(searchQuery.toLowerCase()) ||
      row.fileName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      row.fileExtension.toLowerCase().includes(searchQuery.toLowerCase())
    );
  });

  return (
    <Modal
      id={modalId}
      open={open}
      onClose={onClose}
      aria-labelledby={`modal-title-${dir}`}
      aria-describedby={`modal-description-${dir}`}
    >
      <Box
        sx={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          width: '80%',
          maxWidth: 1200,
          bgcolor: "background.paper",
          boxShadow: 24,
          p: 4,
          borderRadius: 2,
        }}
      >
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            border: '1px solid white',
            borderRadius: '4px',
            paddingLeft: '8px',
            marginBottom: '8px',
          }}
        >
          <Search className="search-icon" sx={{ mr: 1, color: 'white' }} />
          <TextField
            placeholder={dir}
            variant="standard"
            fullWidth
            onChange={handleSearchChange}
            InputProps={{
              disableUnderline: true,
              style: {
                color: 'white',
              },
            }}
            sx={{
              '& .MuiInputBase-input': {
                color: 'white',
              },
            }}
          />
        </Box>
        <div style={{ height: 400, width: '100%' }}>
          <DataGrid
            rows={filteredRows}
            columns={columns}
            checkboxSelection
          />
        </div>
        <Button
          variant="contained"
          color="error"
          onClick={onClose}
          sx={{ mt: 2 }}
        >
          Close
        </Button>
      </Box>
    </Modal>
  );
};

export default DirectorySearchModal;