import {
  Box,
  Button,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  Grid2 as Grid,
  IconButton,
  Typography
} from "@mui/material";
import ResponsiveDialog from "common/ResponsiveDialog";
import DeleteIcon from "products/AgIcons/Delete";
import { pond } from "protobuf-ts/pond";
import { useKeyManagerAPI } from "providers";
import React, { useState } from "react";

interface Props {
  teamId: string;
  permissions: pond.Permission[];
}

export default function TeamKeyManager(props: Props) {
  const { permissions, teamId } = props;
  const [keyList, setKeyList] = useState<string[]>([]);
  const [openRemove, setOpenRemove] = useState(false);
  const [removeIndex, setRemoveIndex] = useState(0);
  const keyManagerAPI = useKeyManagerAPI();

  const listKeys = () => {
    keyManagerAPI.listKeys(teamId).then(resp => {
      if (resp.data.keys.length > 0) {
        let keys = resp.data.keys;
        setKeyList([...keys]);
      }
    });
  };

  const addKey = () => {
    keyManagerAPI.addKey(teamId).then(resp => {
      let keys = keyList;
      keys.push(resp.data.key);
      setKeyList([...keys]);
    });
  };

  const removeKey = (i: number) => {
    keyManagerAPI.removeKey(teamId, keyList[i]).then(resp => {
      let keys = keyList;
      keys.splice(i, 1);
      setKeyList([...keys]);
    });
  };

  const header = () => {
    return (
      <Grid container justifyContent="space-between" alignItems="center">
        <Grid>
          <Typography>API Keys</Typography>
        </Grid>
        <Grid>
          <Button
            disabled={!permissions.includes(pond.Permission.PERMISSION_WRITE)}
            style={{ marginRight: 5 }}
            variant="contained"
            color="primary"
            onClick={listKeys}>
            Display Keys
          </Button>
          <Button
            disabled={!permissions.includes(pond.Permission.PERMISSION_WRITE)}
            variant="contained"
            color="primary"
            onClick={addKey}>
            Add New Key
          </Button>
        </Grid>
      </Grid>
    );
  };

  const removalConfirmation = () => {
    return (
      <ResponsiveDialog
        open={openRemove}
        onClose={() => {
          setOpenRemove(false);
        }}>
        <DialogTitle>Remove API Key</DialogTitle>
        <DialogContent>
          Are you sure you want to remove {keyList[removeIndex]} as an api key?
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => {
              setOpenRemove(false);
            }}>
            Cancel
          </Button>
          <Button
            variant="contained"
            style={{ backgroundColor: "red" }}
            onClick={() => {
              removeKey(removeIndex);
              setOpenRemove(false);
            }}>
            Delete
          </Button>
        </DialogActions>
      </ResponsiveDialog>
    );
  };

  return (
    <Box padding={2} style={{ display: "flex", flexDirection: "column", overflow: "hidden" }}>
      {removalConfirmation()}
      {header()}
      <Divider />
      <Grid style={{ padding: 10 }} container justifyContent="space-between" alignItems="center">
        {keyList.map((k, i) => (
          <React.Fragment key={k}>
            <Grid size={10}>
              {k}
            </Grid>
            <Grid size={2}>
              <IconButton
                disabled={!permissions.includes(pond.Permission.PERMISSION_WRITE)}
                onClick={() => {
                  setOpenRemove(true);
                  setRemoveIndex(i);
                }}>
                <DeleteIcon />
              </IconButton>
            </Grid>
          </React.Fragment>
        ))}
      </Grid>
    </Box>
  );
}
