import { MenuItem, TextField } from "@mui/material";
import { GetAllDevicePlatformDescribers } from "pbHelpers/DevicePlatform";
import { pond } from "protobuf-ts/pond";

interface Props {
  value: pond.DevicePlatform;
  onChange: (platform: pond.DevicePlatform) => void;
}

export default function SelectDevicePlatform(props: Props) {
  const { value, onChange } = props;

  return (
    <TextField
      id="select-device-platform"
      select
      label="Device Platform"
      value={pond.DevicePlatform[value]}
      fullWidth
      variant="outlined"
      onChange={event =>
        onChange(pond.DevicePlatform[event.target.value as keyof typeof pond.DevicePlatform])
      }>
      {GetAllDevicePlatformDescribers().map(p => (
        <MenuItem key={pond.DevicePlatform[p.platform]} value={pond.DevicePlatform[p.platform]}>
          {p.label}
        </MenuItem>
      ))}
    </TextField>
  );
}
