import React from 'react';
import {Button, TextField} from "@material-ui/core";
import useStyles from "../useStyles";

export const CANFilterFragment = (
  {
    vin,
    fleet,
    canId,
    setCanId,
    edgeMask,
    setEdgeMask,
    interval,
    setInterval,
    busy,
    onSubmit,
  }) => {

  const classes = useStyles();

  const FirstField = () => {
    if (vin) {
      return <TextField
        id="vin"
        name="vin"
        label="VIN"
        variant="outlined"
        margin="normal"
        inputProps={{
          maxLength: "255",
          readOnly: true,
        }}
        value={vin}
        required
        fullWidth
      />
    }
    if (fleet) {
      return <TextField
        id="name"
        name="name"
        label="Fleet Name"
        variant="outlined"
        margin="normal"
        inputProps={{
          maxLength: "255",
          readOnly: true,
        }}
        value={fleet}
        required
        fullWidth
      />
    }
  }

  const canProps = setCanId ? {
    value: canId,
    onChange: (event) => setCanId(event.target.value)
  } : {
    value: canId,
    disabled: true,
  }

  return (
    <React.Fragment>
      {FirstField()}
      <TextField
        id="canId"
        name="canId"
        label="CAN ID"
        variant="outlined"
        margin="normal"
        inputProps={{
          maxLength: "255",
        }}
        required
        fullWidth
        {...canProps}
      />
      <TextField
        id="interval"
        name="interval"
        label="Interval (ms)"
        variant="outlined"
        margin="normal"
        inputProps={{
          maxLength: "255",
        }}
        fullWidth
        value={interval}
        disabled={!(edgeMask == null || edgeMask === "")}
        onChange={async (event) => setInterval(event.target.value)}
      />
      <TextField
        id="edgeMask"
        name="edgeMask"
        label="EdgeMask (hex representation)"
        variant="outlined"
        margin="normal"
        inputProps={{
          maxLength: "255",
        }}
        fullWidth
        value={edgeMask}
        disabled={!(interval == null || interval === "" || interval === '0' || interval === 0)}
        onChange={async (event) => setEdgeMask(event.target.value)}
      />
      <Button
        type="submit"
        disabled={busy}
        fullWidth
        variant="contained"
        color="primary"
        className={classes.submit}
        onClick={onSubmit}
      >
        Submit
      </Button>
   </React.Fragment>
  )
}

