import React, { ChangeEvent, useEffect, useState } from "react";
import { getUsersList, useGetUsersData } from "../../APIs/ManageUsersAPIs/getUsersList";
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Button,
  IconButton,
  TextField,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
import AddIcon from '@mui/icons-material/Add';

interface Row {
    id: number;
    name: string;
    age: number;
  }
  
  const initialData: Row[] = [
    { id: 1, name: 'Row 1', age: 25 },
    { id: 2, name: 'Row 2', age: 30 },
  ];

export default function ManageUsers(){
    const [manageUsersData,setManageUsersData] = useState<any>()
    const { data: manageUsersResponse, isLoading, isError } = useGetUsersData();
    const [data, setData] = useState<Row[]>(initialData);
    const [open, setOpen] = useState(false);
    const [selectedRow, setSelectedRow] = useState<Row>({ id: 0, name: '', age: 0 });
    const [newRow, setNewRow] = useState<Row>({ id: 0, name: '', age: 0 });
  
    const handleEdit = (row: Row) => {
      setSelectedRow(row);
      setOpen(true);
    };
  
    const handleDelete = (id: number) => {
      const updatedData = data.filter((row) => row.id !== id);
      setData(updatedData);
    };
  
    const handleSave = () => {
      if (selectedRow.id) {
        const updatedData = data.map((row) => (row.id === selectedRow.id ? selectedRow : row));
        setData(updatedData);
      } else {
        const id = data.length + 1;
        setNewRow({ ...newRow, id });
        setData([...data, { ...newRow, id }]);
      }
  
      setOpen(false);
      setSelectedRow({ id: 0, name: '', age: 0 });
    };
  
    const handleOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
      setSelectedRow({ id: 0, name: '', age: 0 });
    };
  
    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
      const { name, value } = e.target;
      setSelectedRow({ ...selectedRow, [name]: value });
      setNewRow({ ...newRow, [name]: value });
    };
  

  
    console.log(manageUsersResponse,"dsjhgfsdugf")
    return(
        <Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
            <Paper  className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
                <div>
                

                <TableContainer component={Paper}>
                    <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>
                                <Button variant="contained" startIcon={<AddIcon />} onClick={handleOpen}>
                                    Add New Row
                                </Button>
                            </TableCell>
                            <TableCell>Name</TableCell>
                            <TableCell>Email Id</TableCell>
                            <TableCell>Last Login</TableCell>
                            <TableCell>Active</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {manageUsersResponse && manageUsersResponse.map((row:any) => (
                        <TableRow key={row.id}>
                            <TableCell>
                            <IconButton onClick={() => handleEdit(row)} aria-label="edit">
                                <EditIcon sx={{ color: 'white' }}/>
                            </IconButton>
                            <IconButton onClick={() => handleDelete(row.id)} aria-label="delete">
                                <DeleteIcon sx={{ color: 'white' }}/>
                            </IconButton>
                            </TableCell>
                            <TableCell>{row.username}</TableCell>
                            <TableCell>{row.email_id}</TableCell>
                            <TableCell>{row.last_login}</TableCell>
                            <TableCell>{row.active}</TableCell>
                            
                        </TableRow>
                        ))}
                    </TableBody>
                    </Table>
                </TableContainer>

                <Dialog className='projectScreen-background' open={open} onClose={handleClose}>
                    <DialogTitle>{selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle>
                    <DialogContent>
                    <TextField
                        autoFocus
                        margin="dense"
                        label="Name"
                        type="text"
                        fullWidth
                        name="name"
                        value={selectedRow.name}
                        onChange={handleChange}
                    />
                    <TextField
                        margin="dense"
                        label="Age"
                        type="number"
                        fullWidth
                        name="age"
                        value={selectedRow.age}
                        onChange={handleChange}
                    />
                    </DialogContent>
                    <DialogActions>
                    <Button onClick={handleClose} color="primary">
                        Cancel
                    </Button>
                    <Button onClick={handleSave} color="primary">
                        Save
                    </Button>
                    </DialogActions>
                </Dialog>
                </div>
            </Paper>
        </Paper>
    )
}