frontend/src/integrations/LibraCart/LibraCartAccess.tsx

import {
  Avatar,
  Box,
  Button,
  DialogActions,
  DialogContent,
  DialogTitle,
  Grid,
  MenuItem,
  TextField
} from "@mui/material";
import ResponsiveDialog from "common/ResponsiveDialog";
import { teamScope, User } from "models";
import { pond } from "protobuf-ts/pond";
import { useSnackbar, useUserAPI } from "providers";
import { useLibraCartProxyAPI } from "providers/pond/libracartProxyAPI";
import React, { useEffect, useState } from "react";
import { useLocation } from "react-router";
import TeamSearch from "teams/TeamSearch";

export default function LibraCartAccess() {
  const [openDialog, setOpenDialog] = useState(false);
  const [teamKey, setTeamKey] = useState("");
  const [teamUsers, setTeamUsers] = useState<User[]>([]);
  const [primaryUser, setPrimaryUser] = useState("");
  const [libracartUsername, setLibraCartUserName] = useState("");
  const [libracartCode, setLibraCartCode] = useState<string | null>("");
  //const [activeStep, setActiveStep] = useState<number>(0);
  const userAPI = useUserAPI();
  const libracartAPI = useLibraCartProxyAPI();
  //const [dataOps, setDataOps] = useState<pond.DataOption[]>([]);
  const { openSnack } = useSnackbar();
  const search = useLocation().search;
  const searchParams = new URLSearchParams(search);
  //const [{ as }] = useGlobalState();
  // const integration_url = process.env.REACT_APP_LIBRACART_INTEGRATION_URL;
  const integration_url = import.meta.env.VITE_LIBRACART_INTEGRATION_URL;


  const submitNewOrganization = () => {
    if (libracartCode) {
      libracartAPI
        .addAccount(teamKey, primaryUser, libracartCode, libracartUsername)
        .then(resp => {
          //the code was used so remove it from local storage
          if (localStorage.getItem("code")) {
            localStorage.removeItem("code");
          }
          openSnack("Added New Libra Cart Account Link");
        })
        .catch(err => {
          openSnack("Failed to Add New Libra Cart Account Link");
        });
      setOpenDialog(false);
    }
  };

  useEffect(() => {
    if (teamKey !== "") {
      userAPI.listObjectUsers(teamScope(teamKey)).then(resp => {
        setTeamUsers(resp.data.users.map((u: pond.User) => User.any(u)));
      });
    }
  }, [teamKey, userAPI]);

  // useEffect(() => {
  //   let code = localStorage.getItem("state");
  //   if (code) {
  //     setLibraCartCode(code);
  //     setOpenDialog(true);
  //   }
  // }, [searchParams, libracartCode]);

  useEffect(() => {
    let code = new URLSearchParams(window.location.search).get("state"); // not sure if the state is correct here i thought it should be the access_token
    if (code) {
      setLibraCartCode(code);
      setOpenDialog(true);
    }
  }, [window.location]);

  const validate = () => {
    let invalid = false;
    if (libracartUsername === "" || teamKey === "" || primaryUser === "" || libracartCode === "") {
      invalid = true;
    }
    return invalid;
  };

  const general = () => {
    return (
      <Box>
        <TextField
          margin="dense"
          label="Libra Cart Email"
          fullWidth
          variant="outlined"
          value={libracartUsername}
          onChange={e => setLibraCartUserName(e.target.value)}
        />
        <TeamSearch label="Team" setTeamCallback={setTeamKey} />
        <TextField
          disabled={teamKey === ""}
          margin="dense"
          label="Primary User"
          select
          fullWidth
          variant="outlined"
          value={primaryUser}
          onChange={e => setPrimaryUser(e.target.value)}>
          {teamUsers.map(u => (
            <MenuItem key={u.id()} value={u.id()}>
              <Grid container direction="row" alignItems="center">
                <Grid item>
                  <Avatar
                    alt={u.name()}
                    src={
                      u.settings.avatar && u.settings.avatar !== "" ? u.settings.avatar : undefined
                    }
                  />
                </Grid>
                <Grid item>
                  <Box marginLeft={2}>{u.name()}</Box>
                </Grid>
              </Grid>
            </MenuItem>
          ))}
        </TextField>
        <TextField
          margin="dense"
          label="code"
          disabled
          fullWidth
          variant="outlined"
          value={libracartCode}
          onChange={e => setLibraCartCode(e.target.value)}
        />
      </Box>
    );
  };

  const newOrgDialog = () => {
    return (
      <ResponsiveDialog
        open={openDialog}
        onClose={() => {
          setOpenDialog(false);
        }}>
        <DialogTitle>Enter New Integration Link</DialogTitle>
        <DialogContent>{general()}</DialogContent>
        <DialogActions>
          <Button
            onClick={() => {
              setOpenDialog(false);
            }}>
            Close
          </Button>
          <Button
            disabled={validate()}
            onClick={submitNewOrganization}
            variant="contained"
            color="primary">
            Submit
          </Button>
        </DialogActions>
      </ResponsiveDialog>
    );
  };

  return (
    <Box style={{ padding: 10 }}>
      <Button
        variant="contained"
        color="primary"
        onClick={e => {
          e.preventDefault();
          window.open(`${integration_url}`, "_blank");
        }}>
        Link Libra Cart Account
      </Button>
      To integrate with Libra Cart, navigate to Integrations page on Libra Cart and "Connect" to
      Adaptive Agriculture App: https://staging.cloud.agrimatics.com/grain/integrations
      {newOrgDialog()}
    </Box>
  );
}