frontend/src/integrations/LibraCart/LibraCartAccess.tsx

import { Help } from "@mui/icons-material";
import {
  Avatar,
  Box,
  Button,
  DialogActions,
  DialogContent,
  DialogTitle,
  Grid2 as Grid,
  MenuItem,
  TextField,
  Tooltip,
  Typography
} from "@mui/material";
import ResponsiveDialog from "common/ResponsiveDialog";
import { teamScope, User } from "models";
import { pond } from "protobuf-ts/pond";
import { useGlobalState, useSnackbar, useUserAPI } from "providers";
import { useLibraCartProxyAPI } from "providers/pond/libracartProxyAPI";
import React, { useEffect, useState } from "react";
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 [libracartAuth, setLibraCartAuth] = 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 [{ as }] = useGlobalState();


  const submitNewOrganization = () => {
    if (libracartCode && libracartAuth) {
      libracartAPI
        .addAccount(teamKey, primaryUser, libracartCode, libracartAuth, libracartUsername)
        .then(resp => {
          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"); // this is the account_code
    let auth = new URLSearchParams(window.location.search).get("authorization_token"); // this is the authorization used to verify where it came from

    if (code && auth) {
      setLibraCartCode(code);
      setLibraCartAuth(auth);
      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>
                  <Avatar
                    alt={u.name()}
                    src={
                      u.settings.avatar && u.settings.avatar !== "" ? u.settings.avatar : undefined
                    }
                  />
                </Grid>
                <Grid>
                  <Box marginLeft={2}>{u.name()}</Box>
                </Grid>
              </Grid>
            </MenuItem>
          ))}
        </TextField>
        <TextField
          margin="dense"
          label="code"
          disabled
          fullWidth
          variant="outlined"
          value={libracartCode}
        />
        <TextField
          margin="dense"
          label="authorization token"
          disabled
          fullWidth
          variant="outlined"
          value={libracartAuth}
        />
      </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 }}>
      <Grid container direction="row" alignContent="center" alignItems="center" wrap="nowrap" width="100%" justifyContent="space-between">
        <Grid container direction="row" alignContent="center" alignItems="center" wrap="nowrap">
          <Grid>
            <Button
              variant="contained"
              color="primary"
              onClick={e => {
                e.preventDefault();
                window.open(`https://cloud.agrimatics.com/grain/integrations`, "_blank");
              }}>
              Link Libra Cart Account
            </Button>
          </Grid>
          <Grid>
            <Tooltip 
              title='The integration can be found by selecting my account in the corner, 
              selecting the "Manage Account" option and then selecting integrations in the left side menu'>
            <Help />
            </Tooltip>
          </Grid>
        </Grid>
        <Grid>
          <Tooltip title={"This will Sync the data for all Libra Cart accounts linked to " + (as ? "this team" : "your account")}>
            <Button
              variant="contained"
              color="primary"
              onClick={e => {
                libracartAPI.syncData().then(resp => {}).catch(err => {})
              }}>
              Sync
            </Button>
          </Tooltip>
        </Grid>
      </Grid>
      <Box paddingTop={2}>
        <Typography>
          Libra Cart data will sync every 6 hours, if the data is needed immediately you can select the Sync button. It may take up to 15 minutes for the data to appear in our platform.
        </Typography>
      </Box>

      {newOrgDialog()}
    </Box>
  );
}