import { Dialog, DialogActions, DialogContent, DialogTitle, Grid2, TextField } from "@mui/material";
import CancelSubmit from "common/CancelSubmit";
import { useComponentAPI, useSnackbar } from "hooks";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers";
import { useState } from "react";
import { or } from "utils";

interface Props {
  open: boolean;
  onClose: () => void;
  device: number;
}

export default function AddComponentManualDialog (props: Props) {
  const { open, onClose, device } = props;
  const [{as}] = useGlobalState();
  const componentAPI = useComponentAPI();
  const snackbar = useSnackbar();
  const [component, setComponent] = useState<pond.ComponentSettings>(pond.ComponentSettings.create())

  const onSubmit = () => {
    componentAPI.add(device, component, as).then(() => {
      snackbar.success("Component added")
    })
  }

  const close = () => {
    setComponent(pond.ComponentSettings.create())
    onClose()
  }

  return (
    <Dialog
      open={open}
      onClose={onClose}
    >
      <DialogTitle>
        Manual Component Entry
      </DialogTitle>
      <DialogContent>
        <Grid2 container direction="column" justifyContent={"center"} spacing={2}>
          <Grid2>
            <TextField 
              value={component.name}
              fullWidth
              label="Name"
              onChange={event => {
                let newSettings = pond.ComponentSettings.create(component)
                newSettings.name = event.currentTarget.value
                setComponent(newSettings)
              }}
            />
          </Grid2>
          <Grid2 container direction="row">
            <Grid2 size={{ xs: 4 }}>
              <TextField 
                value={component.type}
                type="number"
                label="Type"
                onChange={event => {
                  let newSettings = pond.ComponentSettings.create(component)
                  newSettings.type = or(parseInt(event.currentTarget.value), 0)
                  setComponent(newSettings)
                }}
              />
            </Grid2>
            <Grid2 size={{ xs: 4 }}>
              <TextField 
                value={component.addressType}
                type="number"
                label="Address Type"
                onChange={event => {
                  let newSettings = pond.ComponentSettings.create(component)
                  newSettings.addressType = or(parseInt(event.currentTarget.value), 0)
                  setComponent(newSettings)
                }}
              />
            </Grid2>
            <Grid2 size={{ xs: 4 }}>
              <TextField 
                value={component.address}
                type="number"
                label="Address"
                onChange={event => {
                  let newSettings = pond.ComponentSettings.create(component)
                  newSettings.address = or(parseInt(event.currentTarget.value), 0)
                  setComponent(newSettings)
                }}
              />
            </Grid2>
          </Grid2>
          <Grid2 container direction="row">
            <Grid2 size={{ xs: 6 }}>
              <TextField
                value={component.measurementPeriodMs}
                type="number"
                label="Measurement Perios (ms)"
                fullWidth
                onChange={event => {
                  let newSettings = pond.ComponentSettings.create(component)
                  newSettings.measurementPeriodMs = or(parseInt(event.currentTarget.value), 0)
                  setComponent(newSettings)
                }}
              />
            </Grid2>
            <Grid2 size={{ xs: 6 }}>
              <TextField
                value={component.reportPeriodMs}
                type="number"
                label="Report Period (ms)"
                fullWidth
                onChange={event => {
                  let newSettings = pond.ComponentSettings.create(component)
                  newSettings.reportPeriodMs = or(parseInt(event.currentTarget.value), 0)
                  setComponent(newSettings)
                }}
              />
            </Grid2>
          </Grid2>
        </Grid2>
      </DialogContent>
      <DialogActions>
        <CancelSubmit onCancel={close} onSubmit={onSubmit} />
      </DialogActions>
    </Dialog>
  )
}