import React, { useState, useEffect } from "react";

/*
 * It works a little something like this:
 * Choose what source and destination action you want
 * Select the source field to be used for a required destination field OR
 * write a static value for the field (FIXME) OR
 * run a generator action for the field (FIXME, these should be e.g. run workflow and get result)
 */

import Grid from "@material-ui/core/Grid";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";

import ButtonBase from "@material-ui/core/ButtonBase";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import InputLabel from "@material-ui/core/InputLabel";
import Table from "@material-ui/core/Table";
import InputAdornment from "@material-ui/core/InputAdornment";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";

import SearchIcon from "@material-ui/icons/Search";
import DeleteIcon from "@material-ui/icons/Delete";

import Downshift from "downshift";
import deburr from "lodash/deburr";

const EditSchedule = (props) => {
  const { globalUrl } = props;

  const [tmpSrcApp, setTmpSrcApp] = useState({});
  const [tmpDstApp, setTmpDstApp] = useState({});
  const [srcApp, setSrcApp] = useState({});
  const [srcAppConfig, setSrcAppConfig] = useState([]);
  const [srcAppConfigOpen, setSrcAppConfigOpen] = useState(false);
  const [srcAppAction, setSrcAppAction] = useState("");

  const [dstApp, setDstApp] = useState({});
  const [dstAppAction, setDstAppAction] = useState("");
  const [dstAppConfig, setDstAppConfig] = useState([]);
  const [dstAppConfigOpen, setDstAppConfigOpen] = useState(false);

  // Lets set the real data here
  const [selectedSrc, setSelectedSrc] = React.useState("");
  const [, setSelectedSrcData] = React.useState({});
  const [selectedDst, setSelectedDst] = React.useState([]);

  // FIXME
  const [suggestions, setSuggestions] = React.useState([]);
  const [inputappdata, setInputAppData] = React.useState({});

  const [scheduleConfig, setScheduleConfig] = React.useState({});
  const [selectedSrcParameters, setSelectedSrcParameters] = React.useState([]);

  const getCurrentSchedule = () => {
    fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setScheduleConfig(responseJson);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const loadAppSuggestions = () => {
    fetch(globalUrl + "/api/v1/schedules/apps", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setSuggestions(responseJson.apps);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // FIXME - this is generated from app selection input with required items
  useEffect(() => {
    if (Object.getOwnPropertyNames(scheduleConfig).length <= 0) {
      getCurrentSchedule();
    }

    // Load apps if destination or source is
    if (suggestions.length === 0) {
      loadAppSuggestions();
    }

    // Load everything else
    if (
      Object.getOwnPropertyNames(scheduleConfig).length > 0 &&
      Object.getOwnPropertyNames(scheduleConfig.appinfo.sourceapp).length > 0 &&
      Object.getOwnPropertyNames(srcApp).length <= 0
    ) {
      if (scheduleConfig.appinfo.sourceapp.name.length > 0) {
        setSrcApp(scheduleConfig.appinfo.sourceapp);
        setSrcAppAction(scheduleConfig.appinfo.sourceapp.action);
      }
    }

    // Use sourceapp.name&version and sourceapp.action and look for name in inputappdata
    // Basically fix everything in this one lol
    if (
      suggestions.length > 0 &&
      srcAppAction.length > 0 &&
      Object.getOwnPropertyNames(scheduleConfig).length > 0 &&
      Object.getOwnPropertyNames(inputappdata).length <= 0
    ) {
      // Loops all apps and finds current
      for (var key in suggestions) {
        var curapp = suggestions[key];
        if (curapp.name === srcApp.name) {
          break;
        }
      }

      setInputAppData(curapp);

      // Loops the apps actions to find current
      for (key in curapp.output) {
        var curappaction = curapp.output[key];
        if (curappaction.name === srcAppAction) {
          break;
        }
      }

      setSelectedSrcParameters(curappaction.outputparameters);
      if (curappaction.config !== null && curappaction.config !== undefined) {
        setSrcAppConfig(curappaction.config);
      }

      // FIXME - set src of all translator nodes to curappaction.outputparameters[0] if not defined
      //value={scheduleConfig.translator[count].src.name}

      //console.log(scheduleConfig)
      var newtranslator = [];
      for (key in scheduleConfig.translator) {
        var curtranslator = scheduleConfig.translator[key];

        // Overwrite issues
        if (curtranslator.src.name === "") {
          curtranslator.src = curappaction.outputparameters[0];
        }

        newtranslator.push(curtranslator);
      }

      scheduleConfig.translator = newtranslator;
      setScheduleConfig(scheduleConfig);
    }

    if (
      suggestions.length > 0 &&
      dstAppAction.length <= 0 &&
      Object.getOwnPropertyNames(scheduleConfig).length > 0
    ) {
      // Loops all apps and finds current
      for (key in suggestions) {
        curapp = suggestions[key];
        if (curapp.name === dstApp.name) {
          break;
        }
      }

      const curAction = scheduleConfig.appinfo.destinationapp.action;

      // Loops the apps actions to find current
      for (key in curapp.output) {
        curappaction = curapp.output[key];
        if (curappaction.name === curAction) {
          break;
        }
      }

      setDstAppAction(curappaction.name);
      if (curappaction.config !== null && curappaction.config !== undefined) {
        setDstAppConfig(curappaction.config);
      }
    }
  });

  const getSuggestions = (value, type, { showEmpty = false } = {}) => {
    const inputValue = deburr(value.trim()).toLowerCase();
    const inputLength = inputValue.length;
    let count = 0;

    return inputLength === 0 && !showEmpty
      ? []
      : suggestions.filter((suggestion) => {
          const keep =
            count < 5 &&
            suggestion.types &&
            suggestion.types.includes(type) &&
            suggestion.name.slice(0, inputLength).toLowerCase() === inputValue;

          if (keep) {
            count += 1;
          }

          return keep;
        });
  };

  const setSrcAppWrapper = (currentapps) => {
    setSrcApp(currentapps[0]);
    if (currentapps[0].output.length > 0) {
      selectSrcAction(currentapps[0].output[0].name);
    }
  };

  const setDstAppWrapper = (currentapps) => {
    setDstApp(currentapps[0]);
    if (currentapps[0].input.length > 0) {
      selectInitialDstAction(currentapps);
    }
  };

  const renderInput = (type, inputProps) => {
    const { InputProps, classes, ref, ...other } = inputProps;

    // Sets the srcapp if string is matching exactly for name
    if (
      InputProps["aria-activedescendant"] === null &&
      InputProps["value"].length > 0
    ) {
      const currentapps = suggestions.filter(
        (data) => data.name === InputProps["value"]
      );
      if (currentapps.length === 1) {
        if (type === "output") {
          if (currentapps[0].name !== srcApp.name) {
            setSrcAppWrapper(currentapps);
          }
        } else if (type === "input") {
          if (currentapps[0].name !== dstApp.name) {
            setDstAppWrapper(currentapps);
          }
        }
      }
    }

    return (
      <div>
        <TextField
          id="standard-search"
          type="search"
          inputStyle={{ fontSize: "10rem" }}
          InputProps={{
            disableUnderline: true,
            inputRef: ref,
            ...InputProps,
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            ),
          }}
          {...other}
        />
      </div>
    );
  };

  const renderSuggestion = (suggestionProps) => {
    const { suggestion, index, itemProps, highlightedIndex, selectedItem } =
      suggestionProps;
    const isHighlighted = highlightedIndex === index;
    const isSelected = (selectedItem || "").indexOf(suggestion.name) > -1;

    return (
      <MenuItem
        {...itemProps}
        key={suggestion.name}
        selected={isHighlighted}
        component="div"
        style={{
          fontWeight: isSelected ? 500 : 400,
        }}
      >
        {suggestion.name}
      </MenuItem>
    );
  };

  const bodyDivStyle = {
    marginLeft: "20px",
    marginTop: "50px",
    marginRight: "20px",
    margin: "auto",
    width: "1350px",
    display: "flex",
  };

  const appActionStyle = {
    height: "50px",
    marginTop: "10px",
  };

  // FIXME - set this
  //const setRelationshipsFromSource = () => {

  //}

  //// FIXME - set this
  //const setRelationshipsFromGenerator = () => {

  //}

  const selectDstAppAction = (event) => {
    if (event.target.value === dstAppAction) {
      return;
    }

    setDstAppAction(event.target.value);
    refactorTranslations(event.target.value);
  };

  const refactorTranslations = (action) => {
    // dstapp is chosen
    var found = false;
    for (var key in dstApp.input) {
      var curinput = dstApp.input[key];
      if (curinput.name === action) {
        found = true;
        break;
      }
    }

    // Should never happen..
    if (!found) {
      return;
    }

    var tmprelationships = [];
    for (key in curinput.inputparameters) {
      var curRelation = { dst: curinput.inputparameters[key], src: {} };
      tmprelationships.push(curRelation);
    }

    scheduleConfig["translator"] = tmprelationships;
    setScheduleConfig(scheduleConfig);
  };

  const selectInitialDstAction = (value) => {
    var action = value[0].input[0].name;
    setDstAppAction(action);

    var found = false;
    for (var key in value) {
      var curinput = value[0].input[key];
      if (curinput.name === action) {
        found = true;
        break;
      }
    }

    // Should never happen..
    if (!found) {
      return;
    }

    var tmprelationships = [];
    for (key in curinput.inputparameters) {
      var curRelation = { dst: curinput.inputparameters[key], src: {} };
      tmprelationships.push(curRelation);
    }

    scheduleConfig["translator"] = tmprelationships;
    setScheduleConfig(scheduleConfig);
  };

  const selectSrcAction = (value) => {
    // FIXME - load the config for this action
    var found = false;

    setSrcAppAction(value);

    var curitem = {};
    for (var key in inputappdata.output) {
      curitem = inputappdata.output[key];
      if (curitem.name === value) {
        found = true;
        break;
      }
    }

    if (!found) {
      setSelectedSrcParameters([]);
      return;
    }

    // Generate this for every relation?
    setSelectedSrcParameters(curitem.outputparameters);

    //FIXME - check if source has the right attribute
    var tmprelationships = [];
    key = 0;
    for (key in scheduleConfig.translator) {
      var curRelation = scheduleConfig.translator[key];
      curRelation["src"] = curitem.outputparameters[0];
      tmprelationships.push(curRelation);
    }

    scheduleConfig["translator"] = tmprelationships;
    setScheduleConfig(scheduleConfig);
  };

  // Wrapper to handle event click
  const selectSrcActionWrapper = (event) => {
    return selectSrcAction(event.target.value);
  };

  const srcappaction =
    Object.getOwnPropertyNames(srcApp).length > 0 && srcApp.output ? (
      <div>
        <FormControl variant="outlined" style={{ marginTop: "10px" }}>
          <InputLabel htmlFor="outlined-age-simple">Actions</InputLabel>
          <Select
            value={srcAppAction}
            onChange={selectSrcActionWrapper}
            style={appActionStyle}
          >
            {srcApp.output.map((data) => (
              <MenuItem value={data.name}>{data.name}</MenuItem>
            ))}
          </Select>
        </FormControl>
      </div>
    ) : null;

  const dstappaction =
    Object.getOwnPropertyNames(dstApp).length > 0 ? (
      <div>
        <FormControl
          fullWidth="true"
          variant="outlined"
          style={{ marginTop: "20px" }}
        >
          <InputLabel htmlFor="outlined-age-simple">Actions</InputLabel>
          <Select
            value={dstAppAction}
            onChange={selectDstAppAction}
            style={appActionStyle}
          >
            {dstApp.input.map((data) => (
              <MenuItem value={data.name}>{data.name}</MenuItem>
            ))}
          </Select>
        </FormControl>
      </div>
    ) : null;

  const downshiftStyle = {
    //marginLeft: "20px",
    //marginTop: "20px",
    //marginRight: "20px",
    display: "flex",
    width: "100%",
  };

  const submitDisabled = selectedSrc.length > 0 && selectedDst.length > 0;
  const submitButtonClick = () => {
    var newtranslations = [];
    var tobeadded = [];
    var tobechanged = [];

    // Go find the information again in testdata

    //newrelationship["translator"] = {"src": {}, "dst": {}}
    //newrelationship["static"] = {}

    // Reformat relationships
    // clean up old relationships
    //

    if (Object.getOwnPropertyNames(scheduleConfig.Translator).length <= 0) {
      return;
    }

    // Clean up old translations for specified elements
    // FIXME - maybe just send a request with relationships and fix in backend?
    // FIXME - there is an issue here for some multifield stuff
    // Literally have to verify every single one anyway..
    for (var selected in selectedDst) {
      var found = false;
      var index = 0;
      for (var key in scheduleConfig["translator"]) {
        if (
          scheduleConfig["translator"][key]["dst"]["name"] ===
          selectedDst[selected]
        ) {
          index = key;
          found = true;
          break;
        }
      }

      if (!found) {
        tobeadded.push(selectedDst[selected]);
      } else {
        // Dst can be the
        tobechanged.push(index);
      }
    }

    var tmprelationships = scheduleConfig;

    key = 0;
    for (key in scheduleConfig["translator"]) {
      if (tobechanged.includes(key)) {
        var tmprel = scheduleConfig["translator"][key];
        tmprel["src"] = { name: selectedSrc };
        tmprelationships["translator"].splice(key, 1);
        newtranslations.push(tmprel);
      }
    }

    key = 0;
    for (key in tobeadded) {
      tmprel = { src: { name: selectedSrc }, dst: { name: tobeadded[key] } };
      newtranslations.push(tmprel);
    }

    // delete deletable keys from copy (new)
    //
    key = 0;
    for (key in newtranslations) {
      tmprelationships["translator"].push(newtranslations[key]);
    }

    setSelectedSrc("");
    setSelectedDst([]);
    setSelectedSrcData({});

    // FIXME - does this work?
    scheduleConfig["translator"] = tmprelationships["translator"];
    setScheduleConfig(scheduleConfig);
  };

  // When it's set, need to find the destination in the row and set static
  const setStaticValue = (event, row) => {
    console.log("HI");
    // FIXME - modify the row first
    // FIXME - set generator and source to "nothing"

    console.log(row.dst.name);
    console.log(row);
    console.log(event.target.value);
    var newsrcrow = {
      name: "static",
      description: "Static value set",
      type: "static",
      value: event.target.value,
      schema: { type: "string" },
    };

    var relationshipclone = JSON.parse(JSON.stringify(scheduleConfig));
    for (var key in scheduleConfig["translator"]) {
      var curItem = scheduleConfig["translator"][key];
      if (curItem.dst.name === row.dst.name) {
        break;
      }
    }

    relationshipclone["translator"][key]["src"] = newsrcrow;

    scheduleConfig["translator"] = relationshipclone["translator"];
    console.log(scheduleConfig);

    // Fuck this :(
    // DO DIS IN FRONTEND AND HAVE A SUBMIT BUTTON :(
    fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(scheduleConfig),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setScheduleConfig({});
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // Rewrites relationships clientside
  const setCurrentSrcPropRelation = (event, rowkey) => {
    console.log(event, rowkey);
    var found = false;

    for (var key in selectedSrcParameters) {
      var curItem = selectedSrcParameters[key];
      if (curItem.name === event.target.value) {
        found = true;
        break;
      }
    }

    // No idea how this would ever happen, but but (:
    if (!found) {
      return;
    }

    var row = scheduleConfig.translator[rowkey];
    var rowclone = JSON.parse(JSON.stringify(row));
    rowclone.src = curItem;

    var relationshipclone = JSON.parse(JSON.stringify(scheduleConfig));
    for (key in scheduleConfig["translator"]) {
      curItem = scheduleConfig["translator"][key];
      if (curItem.dst.name === row.dst.name) {
        break;
      }
    }

    relationshipclone["translator"][key] = rowclone;

    scheduleConfig["translator"] = relationshipclone["translator"];
    console.log(scheduleConfig);

    // Fuck this :(
    // DO DIS IN FRONTEND AND HAVE A SUBMIT BUTTON :(
    fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(scheduleConfig),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setScheduleConfig({});
      })
      .catch((error) => {
        console.log(error);
      });
    return;
  };

  const relationshipBody =
    Object.getOwnPropertyNames(scheduleConfig).length > 0 &&
    scheduleConfig["translator"] !== undefined &&
    scheduleConfig.translator.length > 0 ? (
      <Table style={{ marginBottom: "30px" }}>
        <TableBody>
          <TableRow key="header">
            <TableCell component="th" scope="row">
              Action
            </TableCell>
            <TableCell component="th" scope="row">
              Source Field
            </TableCell>
            <TableCell component="th" scope="row">
              Destination Field
            </TableCell>
            <TableCell component="th" scope="row">
              Field Type
            </TableCell>
            <TableCell component="th" scope="row">
              Required
            </TableCell>
            <TableCell component="th" scope="row">
              Static
            </TableCell>
            <TableCell component="th" scope="row">
              Generator
            </TableCell>
            <TableCell component="th" scope="row">
              Transform
            </TableCell>
          </TableRow>
          {scheduleConfig.translator.map((row, count) => {
            var buttonIcon = <DeleteIcon />;
            if (!row.dst.required) {
              buttonIcon = (
                <Button
                  disabled={!submitDisabled}
                  onClick={submitButtonClick}
                  variant="outlined"
                  color="primary"
                >
                  REMOVEME
                </Button>
              );
            }

            const srcpropsSelector =
              (Object.getOwnPropertyNames(selectedSrcParameters).length > 0 ||
                Object.getOwnPropertyNames(scheduleConfig.translator).length >
                  0) &&
              Object.getOwnPropertyNames(srcApp).length > 0 ? (
                <Select
                  value={scheduleConfig.translator[count].src.name}
                  style={appActionStyle}
                  onChange={(e) => {
                    setCurrentSrcPropRelation(e, count);
                  }}
                >
                  {selectedSrcParameters.map((data) => (
                    <MenuItem value={data.name}>{data.name}</MenuItem>
                  ))}
                </Select>
              ) : (
                <div>No defined fields</div>
              );

            const placeholderValue =
              row.src.type === "static"
                ? row.src.value
                : "... Set a static value";

            return (
              <TableRow>
                <TableCell component="th" scope="row">
                  {buttonIcon}
                </TableCell>
                <TableCell>{srcpropsSelector}</TableCell>
                <TableCell>{row.dst.name}</TableCell>
                <TableCell>{row.dst.schema.type}</TableCell>
                <TableCell>{row.dst.required}</TableCell>
                <TableCell>
                  <TextField
                    color="primary"
                    name="searchtext"
                    placeholder={placeholderValue}
                    InputProps={{
                      disableUnderline: true,
                    }}
                    onKeyPress={(event) => {
                      if (event.key === "Enter") {
                        event.preventDefault();
                        console.log(`Pressed keyCode ${event.key}`);
                        setStaticValue(event, row);
                      }
                    }}
                  />
                </TableCell>
                <TableCell>INSERT SCRIPT THINGY - Cortex responder?</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    ) : null;

  // FIXME - use this
  //const submitRelationships = () => {
  //	// Make an API-call to the backend for verification
  //	// Return with failures etc, and mark row issues?
  //
  //	var apiUrl = "http://localhost:5000"
  //	fetch(apiUrl+"/api/v1/schedules",
  //			{
  //				method: "POST",
  //				headers: {"content-type": "application/json"},
  //				body: JSON.stringify(scheduleConfig),
  //			}
  //	)
  //	.then((response) => response.json())
  //	.then((responseJson) => {
  //		console.log(responseJson)
  //	})
  //	.catch((error) => {
  //		console.log(error);
  //	});
  //}

  const executeSchedule = () => {
    fetch(
      globalUrl + "/api/v1/schedules/" + props.match.params.key + "/execute",
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      }
    )
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const submitButton = (
    <div style={{ margin: "auto", marginTop: "20px" }}>
      <Button onClick={executeSchedule} variant="outlined" color="primary">
        Execute
      </Button>
    </div>
  );

  // Requires src or dst as input
  // FIXME - use this shit to edit an app or something
  //const editButtonFix = (app, apptype) => {
  //	if (apptype === "src") {

  //	} else if (apptype === "dst") {

  //	}
  //}

  const editSrcApp = (event) => {
    // if tmpsrcapp, show RESET (can be an X or something too)
    // if reset is clicked, set source app back to the original
    setTmpSrcApp(scheduleConfig.appinfo.sourceapp);

    var tmpscheduleConfig = scheduleConfig;
    tmpscheduleConfig.appinfo.sourceapp = {};

    fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(tmpscheduleConfig),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setScheduleConfig({});
        setSrcApp({});
        setSrcAppAction("");
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const editDstApp = (event) => {
    // if tmpsrcapp, show RESET (can be an X or something too)
    // if reset is clicked, set source app back to the original
    setTmpDstApp(scheduleConfig.appinfo.destinationapp);

    var tmpscheduleConfig = scheduleConfig;
    tmpscheduleConfig.appinfo.destinationapp = {};

    fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(tmpscheduleConfig),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setScheduleConfig({});
        setDstApp({});
        setDstAppAction("");
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const scheduleApp = (app, actiondata) => {
    const editButton =
      actiondata === "src" ? (
        <Button
          onClick={(event) => {
            editSrcApp(event);
          }}
          style={{
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)",
          }}
          variant="outlined"
          color="primary"
        >
          Edit
        </Button>
      ) : (
        <Button
          onClick={(event) => {
            editDstApp(event);
          }}
          style={{
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)",
          }}
          variant="outlined"
          color="primary"
        >
          Edit
        </Button>
      );

    const configureButton =
      actiondata === "src" ? (
        <Button
          disabled={srcAppConfig.length === 0}
          style={{
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)",
          }}
          onClick={() => setSrcAppConfigOpen(true)}
          variant="outlined"
          color="primary"
        >
          Config
        </Button>
      ) : (
        <Button
          disabled={dstAppConfig.length === 0}
          style={{
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)",
          }}
          onClick={() => setDstAppConfigOpen(true)}
          variant="outlined"
          color="primary"
        >
          Config
        </Button>
      );

    // FIXME - set src vs dst
    return (
      <Grid container spacing={2} style={{ margin: "10px 10px 10px 10px" }}>
        <Grid item>
          <ButtonBase>
            <img alt="" style={{ width: "100px", height: "100px" }} />
          </ButtonBase>
        </Grid>
        {splitter}
        <Grid item xs={12} sm container style={{ marginLeft: "10px" }}>
          <Grid item xs container direction="column" spacing={2}>
            <Grid item xs>
              <div>
                <h2>{app.name}</h2>
              </div>
              <div>{app.description}</div>
            </Grid>
            <Grid item>{app.action}</Grid>
          </Grid>
          {splitter}
          <Grid
            item
            style={{
              marginLeft: "10px",
              display: "flex",
              flexDirection: "column",
            }}
          >
            <div style={{ flex: "1" }}>{editButton}</div>
            <div style={{ flex: "1" }}>{configureButton}</div>
          </Grid>
        </Grid>
      </Grid>
    );
  };

  const splitter = (
    <div
      style={{
        width: "1px",
        backgroundColor: "grey",
        margin: "5px 5px 5px 5px",
      }}
    />
  );

  const dstDownshift = (
    <Downshift style={downshiftStyle}>
      {({
        getInputProps,
        getItemProps,
        getMenuProps,
        highlightedIndex,
        inputValue,
        isOpen,
        selectedItem,
      }) => (
        <div style={{ flex: "1" }}>
          {renderInput("input", {
            fullWidth: true,
            InputProps: getInputProps({
              placeholder: "Search destination apps",
            }),
          })}

          <div>
            <div {...getMenuProps()}>
              {isOpen ? (
                <Paper square>
                  {getSuggestions(inputValue, "input").map(
                    (suggestion, index) =>
                      renderSuggestion({
                        suggestion,
                        index,
                        itemProps: getItemProps({ item: suggestion.name }),
                        highlightedIndex,
                        selectedItem,
                      })
                  )}
                </Paper>
              ) : null}
            </div>
            {dstappaction}
          </div>
        </div>
      )}
    </Downshift>
  );

  const srcDownshift = (
    <Downshift style={downshiftStyle}>
      {({
        getInputProps,
        getItemProps,
        getMenuProps,
        highlightedIndex,
        inputValue,
        isOpen,
        selectedItem,
      }) => (
        <div style={{ flex: "1" }}>
          {renderInput("output", {
            fullWidth: true,
            InputProps: getInputProps({
              placeholder: "Search source apps",
            }),
          })}

          <div>
            <div {...getMenuProps()}>
              {isOpen ? (
                <Paper square>
                  {getSuggestions(inputValue, "output").map(
                    (suggestion, index) =>
                      renderSuggestion({
                        suggestion,
                        index,
                        itemProps: getItemProps({ item: suggestion.name }),
                        highlightedIndex,
                        selectedItem,
                      })
                  )}
                </Paper>
              ) : null}
            </div>
            {srcappaction}
          </div>
        </div>
      )}
    </Downshift>
  );

  const submitDstApp = (event) => {
    var packagedSrc = {
      name: dstApp.name,
      id: dstApp.id,
      description: dstApp.description,
      action: dstAppAction,
    };

    var tmpscheduleConfig = scheduleConfig;

    tmpscheduleConfig.appinfo.destinationapp = packagedSrc;

    // Hmm, do this here? Idk
    fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(tmpscheduleConfig),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setScheduleConfig({});
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const submitSrcApp = (event) => {
    var packagedSrc = {
      name: srcApp.name,
      id: srcApp.id,
      description: srcApp.description,
      action: srcAppAction,
    };

    var tmpscheduleConfig = scheduleConfig;

    // FIXME - future fred
    //
    tmpscheduleConfig.appinfo.sourceapp = packagedSrc;

    // Hmm, do this here? Idk
    fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(tmpscheduleConfig),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setScheduleConfig({});
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const resetDstApp = (event) => {
    var tmpscheduleConfig = scheduleConfig;
    tmpscheduleConfig.appinfo.destinationapp = tmpDstApp;

    // Hmm, do this here? Idk
    fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(tmpscheduleConfig),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setScheduleConfig({});
        setDstApp(tmpSrcApp);
        setDstAppAction(tmpDstApp.action);
        setTmpDstApp({});
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const resetSrcApp = (event) => {
    var tmpscheduleConfig = scheduleConfig;
    tmpscheduleConfig.appinfo.sourceapp = tmpSrcApp;

    // Hmm, do this here? Idk
    fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(tmpscheduleConfig),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setScheduleConfig({});
        setSrcApp(tmpSrcApp);
        setSrcAppAction(tmpSrcApp.action);
        setTmpSrcApp({});
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // Based on some srcthing
  const searchGridSrc = (
    <Grid container spacing={2} style={{ margin: "10px 10px 10px 10px" }}>
      <Grid item style={{ width: "100px", height: "100px" }}>
        Choose Source app (FIXME) - clickable
      </Grid>
      {splitter}
      <Grid item xs={12} sm container style={{ marginLeft: "10px" }}>
        <Grid item xs container direction="column" spacing={2}>
          <Grid item xs>
            <div>{srcDownshift}</div>
          </Grid>
        </Grid>
        {splitter}
        <Grid
          item
          style={{
            marginLeft: "10px",
            display: "flex",
            flexDirection: "column",
          }}
        >
          <div style={{ flex: "1" }}>
            <Button
              disabled={Object.getOwnPropertyNames(srcApp).length === 0}
              onClick={(event) => {
                submitSrcApp(event);
              }}
              style={{
                left: "50%",
                top: "50%",
                transform: "translate(-50%, -50%)",
              }}
              variant="outlined"
              color="primary"
            >
              Submit
            </Button>
          </div>
          <div style={{ flex: "1" }}>
            <Button
              disabled={Object.getOwnPropertyNames(tmpSrcApp).length === 0}
              onClick={resetSrcApp}
              style={{
                left: "50%",
                top: "50%",
                transform: "translate(-50%, -50%)",
              }}
              variant="outlined"
              color="primary"
            >
              Reset
            </Button>
          </div>
        </Grid>
      </Grid>
    </Grid>
  );

  const searchGridDst = (
    <Grid container spacing={2} style={{ margin: "10px 10px 10px 10px" }}>
      <Grid item style={{ width: "100px", height: "100px" }}>
        Choose Source app (FIXME) - clickable
      </Grid>
      {splitter}
      <Grid item xs={12} sm container style={{ marginLeft: "10px" }}>
        <Grid item xs container direction="column" spacing={2}>
          <Grid item xs>
            <div>{dstDownshift}</div>
          </Grid>
        </Grid>
        {splitter}
        <Grid
          item
          style={{
            marginLeft: "10px",
            display: "flex",
            flexDirection: "column",
          }}
        >
          <div style={{ flex: "1" }}>
            <Button
              disabled={Object.getOwnPropertyNames(dstApp).length === 0}
              onClick={(event) => {
                submitDstApp(event);
              }}
              style={{
                left: "50%",
                top: "50%",
                transform: "translate(-50%, -50%)",
              }}
              variant="outlined"
              color="primary"
            >
              Submit
            </Button>
          </div>
          <div style={{ flex: "1" }}>
            <Button
              disabled={Object.getOwnPropertyNames(tmpDstApp).length === 0}
              onClick={resetDstApp}
              style={{
                left: "50%",
                top: "50%",
                transform: "translate(-50%, -50%)",
              }}
              variant="outlined"
              color="primary"
            >
              Reset
            </Button>
          </div>
        </Grid>
      </Grid>
    </Grid>
  );

  const srcField =
    Object.getOwnPropertyNames(scheduleConfig).length > 0 &&
    Object.getOwnPropertyNames(scheduleConfig.appinfo.sourceapp).length > 0 &&
    scheduleConfig.appinfo.sourceapp.name.length > 0 ? (
      <div
        style={{
          marginLeft: "20px",
          margintop: "20px",
          marginRight: "20px",
          flex: "1",
        }}
      >
        <Paper
          style={{
            maxWidth: "100%",
            display: "flex",
            padding: "10px 10px 10px 10px",
          }}
        >
          {scheduleApp(scheduleConfig.appinfo.sourceapp, "src")}
        </Paper>
      </div>
    ) : (
      <div
        style={{
          marginLeft: "20px",
          margintop: "20px",
          marginRight: "20px",
          flex: "1",
        }}
      >
        <Paper
          style={{
            minHeight: "136px",
            maxHeight: "136px",
            maxWidth: "100%",
            display: "flex",
            padding: "10px 10px 10px 10px",
          }}
        >
          {searchGridSrc}
        </Paper>
      </div>
    );

  const dstField =
    Object.getOwnPropertyNames(scheduleConfig).length > 0 &&
    Object.getOwnPropertyNames(scheduleConfig.appinfo.destinationapp).length >
      0 &&
    scheduleConfig.appinfo.destinationapp.name.length > 0 ? (
      <div
        style={{
          marginLeft: "20px",
          margintop: "20px",
          marginRight: "20px",
          flex: "1",
        }}
      >
        <Paper
          style={{
            maxWidth: "100%",
            display: "flex",
            padding: "10px 10px 10px 10px",
          }}
        >
          {scheduleApp(scheduleConfig.appinfo.destinationapp, "dst")}
        </Paper>
      </div>
    ) : (
      <div
        style={{
          marginLeft: "20px",
          margintop: "20px",
          marginRight: "20px",
          flex: "1",
        }}
      >
        <Paper
          style={{
            minHeight: "136px",
            maxHeight: "136px",
            maxWidth: "100%",
            display: "flex",
            padding: "10px 10px 10px 10px",
          }}
        >
          {searchGridDst}
        </Paper>
      </div>
    );

  // Have to use array cus of datastore lol (no map[string]string)
  const srcModalData = [];
  const buildSrcModal = (event, fieldname) => {
    var fieldfound = false;
    for (var key in srcModalData) {
      if (srcModalData[key]["key"] === fieldname) {
        fieldfound = true;
        srcModalData[key]["value"] = event.target.value;
        break;
      }
    }

    if (!fieldfound) {
      srcModalData.push({ key: fieldname, value: event.target.value });
    }
    console.log(srcModalData);
  };

  // FIXME - verify required fields?
  const submitSrcConfig = () => {
    scheduleConfig.appinfo.sourceapp.config = srcModalData;
    setScheduleConfig(scheduleConfig);
    setSrcAppConfigOpen(false);

    fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(scheduleConfig),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const dstModalData = [];
  const buildDstModal = (event, fieldname) => {
    var fieldfound = false;
    for (var key in dstModalData) {
      if (dstModalData[key]["key"] === fieldname) {
        fieldfound = true;
        dstModalData[key]["value"] = event.target.value;
        break;
      }
    }

    if (!fieldfound) {
      dstModalData.push({ key: fieldname, value: event.target.value });
    }
    console.log(dstModalData);
  };

  // FIXME - verify required fields
  const submitDstConfig = () => {
    scheduleConfig.appinfo.destinationapp.config = dstModalData;
    setScheduleConfig(scheduleConfig);
    setDstAppConfigOpen(false);

    fetch(globalUrl + "/api/v1/schedules/" + props.match.params.key, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(scheduleConfig),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const dstConfigModal = dstAppConfigOpen ? (
    <Dialog
      modal
      open={dstAppConfigOpen}
      onClose={() => {
        setDstAppConfigOpen(false);
      }}
    >
      <DialogTitle>Source configuration</DialogTitle>
      <DialogContent>
        Configure {dstApp.name}'s required fields
        {dstAppConfig.map((data) => (
          <TextField
            onChange={(event) => {
              buildDstModal(event, data.name);
            }}
            autofocus
            color="primary"
            name="searchtext"
            placeholder={data.name}
            margin="dense"
            id={data.name}
            label={data.name}
            fullWidth
          />
        ))}
      </DialogContent>
      <DialogActions>
        <Button onClick={() => setDstAppConfigOpen(false)} color="primary">
          Cancel
        </Button>
        <Button onClick={() => submitDstConfig()} color="primary">
          Submit
        </Button>
      </DialogActions>
    </Dialog>
  ) : null;

  // FIXME - load the actual fields!
  const srcConfigModal = srcAppConfigOpen ? (
    <Dialog
      modal
      open={srcAppConfigOpen}
      onClose={() => {
        setSrcAppConfigOpen(false);
      }}
    >
      <DialogTitle>Source configuration</DialogTitle>
      <DialogContent>
        Configure {srcApp.name}'s required fields
        {srcAppConfig.map((data) => (
          <TextField
            onChange={(event) => {
              buildSrcModal(event, data.name);
            }}
            autofocus
            color="primary"
            name="searchtext"
            placeholder={data.name}
            margin="dense"
            id={data.name}
            label={data.name}
            fullWidth
          />
        ))}
      </DialogContent>
      <DialogActions>
        <Button onClick={() => setSrcAppConfigOpen(false)} color="primary">
          Cancel
        </Button>
        <Button onClick={() => submitSrcConfig()} color="primary">
          Submit
        </Button>
      </DialogActions>
    </Dialog>
  ) : null;

  return (
    <div>
      {srcConfigModal}
      {dstConfigModal}
      <div style={bodyDivStyle}>
        {srcField}
        {dstField}
      </div>

      <div style={bodyDivStyle}>{submitButton}</div>
      <div style={bodyDivStyle}>{relationshipBody}</div>
    </div>
  );
};

export default EditSchedule;