import { Grid, Chip, Button } from "@material-ui/core";
import { useSnackbar } from "notistack";
import { useHotkeys } from "react-hotkeys-hook";
import React from "react";
import { testRunService } from "../services";
import { TestRun } from "../types";
import { Tooltip } from "./Tooltip";

export const ApproveRejectButtons: React.FunctionComponent<{
  testRun: TestRun;
}> = ({ testRun }) => {
  const { enqueueSnackbar } = useSnackbar();

  const approve = () => {
    testRunService
      .approveBulk([testRun.id], testRun.merge)
      .then(() =>
        enqueueSnackbar("Approved", {
          variant: "success",
        })
      )
      .catch((err) =>
        enqueueSnackbar(err, {
          variant: "error",
        })
      );
  };

  const reject = () => {
    testRunService
      .rejectBulk([testRun.id])
      .then(() =>
        enqueueSnackbar("Rejected", {
          variant: "success",
        })
      )
      .catch((err) =>
        enqueueSnackbar(err, {
          variant: "error",
        })
      );
  };

  useHotkeys("a", approve, [testRun]);
  useHotkeys("x", reject, [testRun]);

  return (
    <Grid container spacing={2} alignItems="center">
      {testRun.merge && (
        <Grid item>
          <Tooltip title="Will replace target branch baseline if accepted">
            <Chip
              label={`merge into: ${testRun.baselineBranchName}`}
              color="secondary"
              size="small"
            />
          </Tooltip>
        </Grid>
      )}
      <Grid item>
        <Tooltip title={"Hotkey: A"}>
          <Button color="inherit" onClick={approve}>
            Approve
          </Button>
        </Tooltip>
      </Grid>
      <Grid item>
        <Tooltip title={"Hotkey: X"}>
          <Button color="secondary" onClick={reject}>
            Reject
          </Button>
        </Tooltip>
      </Grid>
    </Grid>
  );
};