import React, { useState, useEffect, Suspense } from 'react';
import ApiClient from '../common/ApiClient';
import {
  Table,
  TableCell,
  TableContainer,
  TableRow,
  TableHead,
  TableBody,
  tableCellClasses,
  Tooltip,
  Stack,
  Fab,
  Divider,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  DialogContentText,
  Button,
  TextField,
  Alert,
  AlertTitle,
} from '@mui/material';

import { Edit, Delete, Add, GetApp } from '@mui/icons-material';
import { styled } from '@mui/material/styles';

const Password = function () {
  const apiClient = new ApiClient();

  const [passwords, setPasswords] = useState(null);
  const [password, setPassword] = useState({ rowId: '', name: '', value: '' });
  const [openDialog, setOpenDialog] = useState(false);
  const [editMode, setEditmode] = useState(false);
  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
  const [deletePasswordId, setDeletePasswordId] = useState(null);
  const [passwordValue, setPasswordValue] = useState(null);
  const [showPasswordAlert, setShowPasswordAlert] = useState(false);

  const StyledTableCell = styled(TableCell)(({ theme }) => ({
    [`&.${tableCellClasses.head}`]: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white,
    },
    [`&.${tableCellClasses.body}`]: {
      fontSize: 14,
    },
  }));

  const StyledTableRow = styled(TableRow)(({ theme }) => ({
    '&:nth-of-type(odd)': {
      backgroundColor: theme.palette.action.hover,
    },
    '&:last-child td, &:last-child th': {
      border: 0,
    },
  }));

  const addoreditPassword = async function () {
    let response;

    if (editMode) {
      response = await apiClient.put('password', password);
      setEditmode(false);
      setPasswordValue(null);
    } else {
      response = await apiClient.post('password', password);
    }

    if (response.ok) {
      setOpenDialog(false);
      setPassword({ rowId: '', name: '', value: '' });

      getData();
    } else {
      console.error(
        `adding password failed with ${response.status} status code`
      );
    }
  };

  const deletePassword = async function () {
    const response = await apiClient.delete(`password/${deletePasswordId}`);

    if (response.ok) {
      setOpenDeleteDialog(false);
      setPassword({ rowId: '', name: '', value: '' });

      getData();
    } else {
      console.error(
        `adding password failed with ${response.status} status code`
      );
    }
  };

  const getPassword = async function (name, showAlert = true) {
    const response = await apiClient.get(`password/${name}`, false);
    setPasswordValue(response);
    setShowPasswordAlert(showAlert);
    return response;
  };

  const handleEditClicked = async function (password) {
    setEditmode(true);
    const response = await getPassword(password.name, false);
    password.value = response;

    setPassword({
      rowId: password.rowId,
      name: password.name,
      value: password.value,
    });
    setOpenDialog(true);
  };

  const getData = function () {
    apiClient
      .get('password/list')
      .then((data) => {
        setPasswords(data);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setPassword((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <Suspense fallback={<div>Loading...</div>}>
      {passwords && (
        <div style={{ marginTop: '2rem' }}>
          <div
            style={{
              display: 'flex',
              justifyContent: 'flex-end',
              padding: '0.2rem',
              margin: '0.1rem',
            }}
          >
            <Tooltip title="Add">
              <Fab
                size="small"
                color="secondary"
                aria-label="add"
                onClick={() => setOpenDialog(true)}
              >
                <Add />
              </Fab>
            </Tooltip>
          </div>
          <TableContainer style={{ marginTop: '2rem' }}>
            <Table className="striped-table">
              <TableHead>
                <StyledTableRow>
                  <StyledTableCell>Row Id</StyledTableCell>
                  <StyledTableCell>Name</StyledTableCell>
                  <StyledTableCell>Actions</StyledTableCell>
                </StyledTableRow>
              </TableHead>

              <TableBody>
                {passwords.data.map((password) => (
                  <StyledTableRow key={password.rowId}>
                    <StyledTableCell>{password.rowId}</StyledTableCell>
                    <StyledTableCell>{password.name}</StyledTableCell>
                    <StyledTableCell>
                      <Stack direction="row" spacing={1} alignItems="center">
                        <Tooltip title="Edit">
                          <Fab
                            size="small"
                            color="primary"
                            aria-label="edit"
                            onClick={() =>
                              handleEditClicked({
                                rowId: password.rowId,
                                name: password.name,
                                value: '',
                              })
                            }
                          >
                            <Edit />
                          </Fab>
                        </Tooltip>

                        <Divider orientation="vertical" flexItem />

                        <Tooltip title="Delete">
                          <Fab
                            size="small"
                            color="secondary"
                            aria-label="delete"
                            onClick={() => {
                              setOpenDeleteDialog(true);
                              setDeletePasswordId(password.rowId);
                            }}
                          >
                            <Delete />
                          </Fab>
                        </Tooltip>

                        <Divider orientation="vertical" flexItem />

                        <Tooltip title="Get">
                          <Fab
                            size="small"
                            color="secondary"
                            aria-label="get"
                            onClick={() => getPassword(password.name)}
                          >
                            <GetApp />
                          </Fab>
                        </Tooltip>
                      </Stack>
                    </StyledTableCell>
                  </StyledTableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        </div>
      )}

      <Dialog open={openDialog}>
        <DialogTitle style={{ cursor: 'move' }} id="add-dialog">
          {editMode ? 'Edit Password' : 'Add Password'}
        </DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            required
            margin="dense"
            id="rowId"
            name="rowId"
            label="row id"
            type="text"
            fullWidth
            variant="outlined"
            value={password.rowId}
            onChange={handleInputChange}
            disabled={editMode}
            autoComplete="off"
          />
          <TextField
            required
            margin="dense"
            id="name"
            name="name"
            label="name"
            type="text"
            fullWidth
            variant="outlined"
            value={password.name}
            onChange={handleInputChange}
            autoComplete="off"
          />
          <TextField
            required
            margin="dense"
            id="value"
            name="value"
            label="value"
            type="text"
            fullWidth
            variant="outlined"
            value={password.value}
            onChange={handleInputChange}
            autoComplete="off"
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={addoreditPassword}>Save</Button>
          <Button
            onClick={() => {
              setEditmode(false);
              setPassword({ rowId: '', name: '', value: '' });
              setOpenDialog(false);
            }}
          >
            Cancel
          </Button>
        </DialogActions>
      </Dialog>

      <Dialog open={openDeleteDialog}>
        <DialogTitle style={{ cursor: 'move' }} id="add-dialog">
          Delete Password
        </DialogTitle>
        <DialogContent>
          <DialogContentText>
            Are you sure you want to delete the Password?
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => deletePassword()}>Delete</Button>
          <Button
            onClick={() => {
              setOpenDeleteDialog(false);
              setDeletePasswordId(null);
            }}
          >
            Cancel
          </Button>
        </DialogActions>
      </Dialog>

      {passwords  && showPasswordAlert && <Alert
        sx={{ marginTop: '2rem' }}
        open={showPasswordAlert}
        onClose={() => {
          setPasswordValue(null);
          setShowPasswordAlert(false);
        }}
        severity={'success'}
      >
        <AlertTitle>{'retrieved passwords are displayed below'}</AlertTitle>
        {passwordValue}
      </Alert>}
    </Suspense>
  );
};

export default Password;