import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  MenuItem,
  TextField
} from "@mui/material";
import { useFirmwareAPI, usePrevious, useSnackbar } from "hooks";
import { Firmware } from "models";
import { pond } from "protobuf-ts/pond";
import { useEffect, useState } from "react";

interface Props {
  firmware: Firmware;
  isOpen: boolean;
  closeCallback: Function;
  refreshCallback: Function;
}

export default function UpdateFirmwareChannel(props: Props) {
  const firmwareAPI = useFirmwareAPI();
  const { isOpen, closeCallback, refreshCallback } = props;
  const prevFirmware = usePrevious(props.firmware);
  const { success, error } = useSnackbar();
  const [firmware, setFirmware] = useState<Firmware>(Firmware.create());

  useEffect(() => {
    if (prevFirmware !== props.firmware) {
      setFirmware(Firmware.clone(props.firmware));
    }
  }, [firmware, prevFirmware, props.firmware]);

  const closeDialog = () => {
    closeCallback();
  };

  const changeChannel = (event: any) => {
    let updatedFirmware = firmware;
    updatedFirmware.settings.channel = event.target.value;
    setFirmware(updatedFirmware);
  };

  const update = () => {
    firmwareAPI
      .updateChannel(
        firmware.settings.platform,
        firmware.settings.version,
        firmware.settings.channel
      )
      .then((response: any) => {
        success("Firmware channel updated");
        closeDialog();
        refreshCallback();
      })
      .catch((err: any) => {
        error(err);
      });
  };

  if (firmware === null || firmware === undefined) {
    return null;
  } else {
    return (
      <Dialog fullWidth open={isOpen} onClose={closeDialog} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Upload Firmware</DialogTitle>
        <DialogContent>
          <TextField
            disabled
            id="platform"
            name="platform"
            select
            label="Platform"
            margin="normal"
            fullWidth
            variant="outlined"
            value={firmware.settings.platform}>
            <MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_PHOTON}>Photon (Wifi)</MenuItem>
            <MenuItem value={pond.DevicePlatform.DEVICE_PLATFORM_ELECTRON}>
              Electron (Cellular)
            </MenuItem>
          </TextField>
          <TextField
            disabled
            id="version"
            name="version"
            autoFocus
            label="Version"
            margin="normal"
            type="text"
            fullWidth
            variant="outlined"
            value={firmware.settings.version}
          />
          <TextField
            id="channel"
            name="channel"
            select
            required
            label="Channel"
            margin="normal"
            fullWidth
            variant="outlined"
            value={firmware.settings.channel}
            onChange={changeChannel}>
            <MenuItem value={pond.UpgradeChannel.UPGRADE_CHANNEL_RECOVERY}>Recovery</MenuItem>
            <MenuItem value={pond.UpgradeChannel.UPGRADE_CHANNEL_DEVELOPMENT}>Development</MenuItem>
            <MenuItem value={pond.UpgradeChannel.UPGRADE_CHANNEL_ALPHA}>Alpha</MenuItem>
            <MenuItem value={pond.UpgradeChannel.UPGRADE_CHANNEL_BETA}>Beta</MenuItem>
            <MenuItem value={pond.UpgradeChannel.UPGRADE_CHANNEL_STABLE}>Stable</MenuItem>
          </TextField>
        </DialogContent>
        <DialogActions>
          <Button onClick={closeDialog} color="primary">
            Cancel
          </Button>
          <Button onClick={update} color="primary">
            Update
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
}
