import React from "react";
import { Box, Typography } from "@mui/material";
import Grid from "@mui/material/Grid";
import Card from "@mui/material/Card";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import Tooltip from "@mui/material/Tooltip";
import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";
import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
import Backdrop from "@mui/material/Backdrop";
import Button from "@mui/material/Button";
import Fade from "@mui/material/Fade";
import Modal from "@mui/material/Modal";
import TextField from "@mui/material/TextField";
import AddIcon from "@mui/icons-material/Add";
import ClearIcon from "@mui/icons-material/Clear";

// Create Folder Modal Style
const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  maxWidth: 500,
  width: "100%",
  bgcolor: "background.paper",
  boxShadow: 24,
  borderRadius: "8px",
};

function createData(name, icon, owner, fileSize, listedDate, fileItem) {
  return { name, icon, owner, fileSize, listedDate, fileItem };
}

const rows = [
  createData(
    "Product UI/UX Design",
    "/images/folder.png",
    "Danielle Thompson",
    "0.7 GB",
    "Mar 08, 2021",
    "02"
  ),
  createData(
    "App Design & Development",
    "/images/folder.png",
    "ET Themes",
    "521 MB",
    "Feb 13, 2021",
    "01"
  ),
  createData(
    "Ubold Sketch Design",
    "/images/folder.png",
    "Gary Coley",
    "64.2 MB",
    "Dec 18, 2020",
    "02"
  ),
  createData(
    "Annualreport.pdf",
    "/images/folder.png",
    "Cooper Sharwood",
    "12.5 GB",
    "Nov 25, 2020",
    "05"
  ),
  createData(
    "Wireframes",
    "/images/folder.png",
    "Jasper Rigg",
    "8.3 MB",
    "Nov 25, 2019",
    "03"
  ),
  createData(
    "App Design",
    "/images/folder.png",
    "ET Agency",
    "5 GB",
    "Jan 08, 2022",
    "15"
  ),
  createData(
    "Web Design & Development",
    "/images/folder.png",
    "ET Templates",
    "13 GB",
    "Jan 13, 2022",
    "90"
  ),
  createData(
    "React Template",
    "/images/folder.png",
    "ET Company",
    "100 GB",
    "Dec 18, 2021",
    "120"
  ),
  createData(
    "Material Template",
    "/images/folder.png",
    "Cooper Sharwood",
    "12.5 GB",
    "Nov 25, 2020",
    "05"
  ),
  createData(
    "Angular Template",
    "/images/folder.png",
    "Jasper Rigg",
    "8.3 MB",
    "Nov 25, 2019",
    "03"
  ),
];

const AllRecentFiles = () => {
  // Create Folder Modal
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  // Form
  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
      email: data.get("email"),
      password: data.get("password"),
    });
  };

  return (
    <>
      <Card
        sx={{
          boxShadow: "none",
          borderRadius: "10px",
          p: "25px",
          mb: "15px",
        }}
      >
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            borderBottom: "1px solid #EEF0F7",
            paddingBottom: "10px",
            mb: "20px",
          }}
          className="for-dark-bottom-border"
        >
          <Typography
            as="h3"
            sx={{
              fontSize: 18,
              fontWeight: 600,
            }}
          >
            Recent Files
          </Typography>

          <Button
            onClick={handleOpen}
            variant="contained"
            sx={{
              textTransform: "capitalize",
              borderRadius: "8px",
              fontWeight: "600",
              fontSize: "13px",
              padding: "12px 20px",
              color: "#fff !important",
            }}
          >
            <AddIcon
              sx={{ position: "relative", top: "-1px" }}
              className="mr-5px"
            />{" "}
            Create Folder
          </Button>
        </Box>

        <TableContainer
          component={Paper}
          sx={{
            boxShadow: "none",
            maxHeight: "650px",
            overflowY: "auto",
          }}
        >
          <Table 
            sx={{ minWidth: 800 }} 
            aria-label="simple table"
            className="dark-table"
          >
            <TableHead sx={{ background: "#F7FAFF" }}>
              <TableRow>
                <TableCell
                  sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
                >
                  Name
                </TableCell>

                <TableCell
                  sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
                >
                  Owner
                </TableCell>

                <TableCell
                  align="center"
                  sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
                >
                  File Size
                </TableCell>

                <TableCell
                  align="center"
                  sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
                >
                  Listed Date
                </TableCell>

                <TableCell
                  align="center"
                  sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
                >
                  File Item
                </TableCell>

                <TableCell
                  align="right"
                  sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
                >
                  Actions
                </TableCell>
              </TableRow>
            </TableHead>

            <TableBody>
              {rows.map((row) => (
                <TableRow
                  key={row.name}
                  sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
                >
                  <TableCell
                    sx={{ borderBottom: "1px solid #F7FAFF" }}
                  >
                    <Box
                      sx={{
                        display: "flex",
                        alignItems: "center",
                      }}
                    >
                      <img src={row.icon} alt="Image" width="22px" />
                      <Typography
                        as="h5"
                        fontWeight="600"
                        fontSize="13px"
                        className="ml-1"
                      >
                        {row.name}
                      </Typography>
                    </Box>
                  </TableCell>

                  <TableCell
                    sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
                  >
                    {row.owner}
                  </TableCell>

                  <TableCell
                    align="center"
                    sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
                  >
                    {row.fileSize}
                  </TableCell>

                  <TableCell
                    align="center"
                    sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
                  >
                    {row.listedDate}
                  </TableCell>

                  <TableCell
                    align="center"
                    sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
                  >
                    {row.fileItem}
                  </TableCell>

                  <TableCell
                    align="right"
                    sx={{ borderBottom: "1px solid #F7FAFF" }}
                  >
                    <Box
                      sx={{
                        display: "inline-block",
                      }}
                    >
                      <Tooltip title="Remove" placement="top">
                        <IconButton
                          aria-label="remove"
                          size="small"
                          color="danger"
                          className="danger"
                        >
                          <DeleteIcon fontSize="inherit" />
                        </IconButton>
                      </Tooltip>

                      <Tooltip title="Download" placement="top">
                        <IconButton
                          aria-label="download"
                          size="small"
                          color="success"
                          className="success"
                        >
                          <CloudDownloadIcon fontSize="inherit" />
                        </IconButton>
                      </Tooltip>

                      <Tooltip title="Rename" placement="top">
                        <IconButton
                          aria-label="rename"
                          size="small"
                          color="primary"
                          className="primary"
                        >
                          <DriveFileRenameOutlineIcon fontSize="inherit" />
                        </IconButton>
                      </Tooltip>
                    </Box>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Card>

      {/* Create Folder Modal */}
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Box sx={style} className="dark-BG-101010">
            <Box
              sx={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                background: "#EDEFF5",
                borderRadius: "8px",
                padding: "25px 20px",
              }}
              className="bg-black"
            >
              <Typography
                id="modal-modal-title"
                variant="h6"
                component="h2"
                sx={{
                  fontWeight: "600",
                  fontSize: "20px",
                }}
              >
                Create Folder
              </Typography>

              <IconButton
                aria-label="remove"
                size="small"
                onClick={handleClose}
                className="modal-close"
              >
                <ClearIcon />
              </IconButton>
            </Box>

            <Box component="form" noValidate onSubmit={handleSubmit}>
              <Box
                sx={{
                  background: "#fff",
                  padding: "30px 20px",
                  borderRadius: "8px",
                }}
                className="dark-BG-101010"
              >
                <Grid container alignItems="center" spacing={1}>
                  <Grid item xs={12}>
                    <Typography
                      as="h5"
                      sx={{
                        fontWeight: "600",
                        fontSize: "14px",
                        mb: "12px",
                      }}
                    >
                      Folder Name
                    </Typography>
                    <TextField
                      autoComplete="given-name"
                      name="folderName"
                      required
                      fullWidth
                      id="folderName"
                      label="Folder Name"
                      autoFocus
                      InputProps={{
                        style: { borderRadius: 8 },
                      }}
                    />
                  </Grid>

                  <Grid item xs={12} textAlign="end">
                    <Button
                      type="submit"
                      variant="contained"
                      sx={{
                        mt: 1,
                        textTransform: "capitalize",
                        borderRadius: "8px",
                        fontWeight: "600",
                        fontSize: "13px",
                        padding: "12px 20px",
                        color: "#fff !important",
                      }}
                    >
                      <AddIcon
                        sx={{
                          position: "relative",
                          top: "-2px",
                        }}
                        className="mr-5px"
                      />{" "}
                      Add Folder
                    </Button>
                  </Grid>
                </Grid>
              </Box>
            </Box>
          </Box>
        </Fade>
      </Modal>
    </>
  );
};

export default AllRecentFiles;