import {
  Button,
  Checkbox,
  FormControlLabel,
  FormGroup,
  FormLabel,
  Radio,
  RadioGroup,
  TextField,
  Select
} from "@material-ui/core";
import React, { useEffect, useRef, useState } from "react";
import { Redirect } from "react-router";
import { useLocation } from "react-router-dom";

import { logger } from "../../../services/monitoring";
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import {
  useVehicleContext,
  VehicleProvider
} from "../../Contexts/VehicleContext";
import SearchSelect from "../../SearchSelect/SearchSelect";
import api from "../../../services/updatesAPI"
import useStyles from "../../useStyles";


const MainForm = () => {
  const queries = new URLSearchParams(useLocation().search);
  const vin = queries.get("vin") ?? "";

  const { vehicle, getVehicle, updateVehicle, busy } = useVehicleContext();
  const { token: { idToken: { jwtToken: token } } } = useUserContext();
  const { setMessage, setTitle, setSitePath } = useStatusContext();
  const [redirect, setRedirect] = useState(null);
  const classes = useStyles();

  const [sumsVersion, setSumsVersion] = useState("");

  const iccidEl = useRef(null);
  const modelEl = useRef(null);
  const yearEl = useRef(null);
  const trimEl = useRef(null);
  const countryEl = useRef(null);
  const powertrainEl = useRef(null);
  const restraintEl = useRef(null);
  const bodyTypeEl = useRef(null);
  const infoSourceEl = useRef(null);
  const [selectedLogLevel, setSelectedLogLevel] = useState("info");
  const [canbusEnabled, setCANBusEnabled] = useState(true);
  const [idpsEnabled, setIDPSEnabled] = useState(true);
  const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
  const [maxMemBufferSize, setMaxMemBufferSize] = useState(0);
  const [maxDiskBufferSize, setMaxDiskBufferSize] = useState(0);
  const [dtcEnabled, setDTCEnabled] = useState(true);
  const [dltEnabled, setDLTEnabled] = useState(false);
  const [dltLevel, setDLTLevel] = useState(0);
  const debugMaskEl = useRef(null);
  const tagsEl = useRef(null);
  const [dtc_ttl, setDtcTTL] = useState(0);

  const dtcTtlList = [
    { value: 0, label: "Select How Long to Send DTCs" },
    { value: 43200, label: "12 Hours" },
    { value: 86400, label: "24 Hours" },
    { value: 172800, label: "48 Hours" },
    { value: 259200, label: "72 Hours" },
    { value: 604800, label: "1 Week" },
    { value: 1209600, label: "2 Weeks" },
    { value: 1814400, label: "3 Weeks" },
    { value: 2419200, label: "4 Weeks" },
    { value: 3024000, label: "5 Weeks" },
  ]

  const showDebugMask = (process.env.REACT_APP_ENABLE_DEBUGMASK === "1");

  useEffect(() => {
    setTitle("Update Vehicle");
    setSitePath([
      {
        label: `Vehicle ${vin}`,
        link: "/vehicles",
      },
      {
        label: "Update Vehicle",
      },
    ]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    (async () => {
      try {
        if (!vin || !token) return;
        await getVehicle(vin, token);
      } catch (e) {
        setMessage(e.message);
        logger.warn(e.stack);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);

  useEffect(() => {
    setSelectedLogLevel(vehicle.log_level ?? selectedLogLevel);

    setSumsVersion(vehicle.sums_version);
    iccidEl.current.value = vehicle.iccid ?? ""
    modelEl.current.value = vehicle.model ?? "Ocean"
    yearEl.current.value = vehicle.year ?? "2022"
    trimEl.current.value = vehicle.trim ?? "Base"
    countryEl.current.value = vehicle.country ?? ""
    powertrainEl.current.value = vehicle.powertrain ?? ""
    restraintEl.current.value = vehicle.restraint ?? ""
    bodyTypeEl.current.value = vehicle.body_type ?? ""
    infoSourceEl.current.value = vehicle.info_source ?? ""

    if (vehicle.canbus) {
      setCANBusEnabled(vehicle.canbus.enabled ?? canbusEnabled);
      setDataLoggerEnabled(vehicle.canbus.data_logger_enabled ?? dataLoggerEnabled);
      setMaxMemBufferSize(vehicle.canbus.max_mem_buffer_size ?? maxMemBufferSize);
      setMaxDiskBufferSize(vehicle.canbus.max_disk_buffer_size ?? maxDiskBufferSize);
      setDTCEnabled(vehicle.canbus.dtc_enabled ?? dtcEnabled);
    }

    setDLTEnabled(vehicle.dlt_enabled ?? dltEnabled);
    if (vehicle.dlt_enabled) {
      setDLTLevel(vehicle.dlt_level?.toString() ?? dltLevel.toString());
    }

    if (showDebugMask) {
      debugMaskEl.current.value = vehicle.debug_mask ?? ""
    }

    setIDPSEnabled(vehicle.idps_enabled ?? idpsEnabled);

    tagsEl.current.value = vehicle.tags ?? ""

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [vehicle]);

  const onLogLevelChange = (event) => {
    setSelectedLogLevel(event.target.value);
  }

  const onCANBusChange = (event) => {
    setCANBusEnabled(event.target.checked);
  }

  const onIDPSChange = (event) => {
    setIDPSEnabled(event.target.checked);
  }

  const onDataLoggerChange = (event) => {
    setDataLoggerEnabled(event.target.checked);
  }

  const onDtcEnabledChange = (event) => {
    setDTCEnabled(event.target.checked);
  }

  const onDltEnabledChange = (event) => {
    setDLTEnabled(event.target.checked);
  }

  const changeDtcTTL = (event) => {
    setDtcTTL(event.target.value);
  }

  const onDltLevelChange = (event) => {
    setDLTLevel(event.target.value);
  }

  const onMaxMemBufferSizeChange = (event) => {
    setMaxMemBufferSize(event.target.value);
  }

  const onMaxDiskBufferSizeChange = (event) => {
    setMaxDiskBufferSize(event.target.value);
  }

  const onSubmit = async (event) => {
    try {
      event.preventDefault();

      const formData = {
        vin: vin,
        iccid: iccidEl.current.value,
        sums_version: sumsVersion,
        model: modelEl.current.value,
        year: parseInt(yearEl.current.value),
        trim: trimEl.current.value,
        country: countryEl.current.value,
        powertrain: powertrainEl.current.value,
        restraint: restraintEl.current.value,
        body_type: bodyTypeEl.current.value,
        log_level: selectedLogLevel,
        tags: tagsEl.current.value.split(",").map(function (word) {
          return word.trim();
        }),
        canbus: {
          enabled: canbusEnabled,
          data_logger_enabled: canbusEnabled ? dataLoggerEnabled : false,
          max_mem_buffer_size: canbusEnabled ? parseInt(maxMemBufferSize) : 0,
          max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0,
          dtc_enabled: dtcEnabled
        },
        dlt_enabled: dltEnabled,
        dlt_level: dltEnabled ? parseInt(dltLevel) : 0,
        debug_mask: debugMaskEl.current?.value,
        idps_enabled: idpsEnabled,
        dtc_ttl: +dtc_ttl
      };

      const result = await updateVehicle(vin, formData, token);
      if (!result || result.error) return;

      setMessage(`Updated ${result.vin}`);
      setRedirect(`/vehicle-status/${result.vin}`);
    } catch (e) {
      setMessage(e.message);
      logger.warn(e.stack);
    }
  };

  async function getSums() {
    const { data } = await api.getSUMSVersions(token);
    return data.map((sums) => sums.version);
  }

  if (redirect && redirect.length > 0) {
    return <Redirect to={redirect} />;
  }

  return (
    <div className={classes.paper}>
      <form className={classes.form} noValidate action="{onSubmit}">
        <TextField
          id="vin"
          name="vin"
          label="VIN"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "17",
            readOnly: true,
          }}
          disabled
          value={vin}
          required
          fullWidth
        />
        <TextField
          id="iccid"
          name="iccid"
          label="ICCID"
          InputLabelProps={{
            shrink: true
          }}
          defaultValue=""
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "50",
          }}
          fullWidth
          inputRef={iccidEl}
        />
        <SearchSelect
          label="SUMS Version"
          value={sumsVersion}
          setValue={setSumsVersion}
          getData={getSums}
        />
        <TextField
          id="model"
          name="model"
          label="Model"
          defaultValue="Ocean"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "255",
          }}
          required
          fullWidth
          inputRef={modelEl}
        />
        <TextField
          id="year"
          name="year"
          label="Year"
          type="number"
          defaultValue="2022"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "4",
            minLength: "4",
          }}
          required
          fullWidth
          inputRef={yearEl}
        />
        <TextField
          id="trim"
          name="trim"
          label="Trim"
          defaultValue="Base"
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "4",
            minLength: "4",
          }}
          required
          fullWidth
          inputRef={trimEl}
        />
        <TextField
          id="country"
          name="country"
          label="Country"
          InputLabelProps={{
            shrink: true
          }}
          defaultValue=""
          variant="outlined"
          margin="normal"
          inputProps={{
            shrink: +true,
            maxLength: "256",
          }}
          fullWidth
          inputRef={countryEl}
        />
        <TextField
          id="powertrain"
          name="powertrain"
          label="Powertrain Type"
          InputLabelProps={{
            shrink: true
          }}
          defaultValue=""
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "256",
          }}
          fullWidth
          inputRef={powertrainEl}
        />
        <TextField
          id="restraint"
          name="restraint"
          label="Restraint Type"
          InputLabelProps={{
            shrink: true
          }}
          defaultValue=""
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "256",
          }}
          fullWidth
          inputRef={restraintEl}
        />
        <TextField
          id="body_type"
          name="body_type"
          label="Body Type"
          InputLabelProps={{
            shrink: true
          }}
          defaultValue=""
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "256",
          }}
          fullWidth
          inputRef={bodyTypeEl}
        />
        <TextField
          id="info_source"
          name="info_source"
          label="Info Source"
          InputLabelProps={{
            shrink: true
          }}
          inputProps={{
            readOnly: true
          }}
          disabled
          defaultValue=""
          variant="outlined"
          margin="normal"
          fullWidth
          inputRef={infoSourceEl}
        />
        <TextField
          id="tag"
          name="tags"
          label='Tags (comma separated, alphanumeric and - only)'
          InputLabelProps={{
            shrink: true
          }}
          defaultValue=""
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "1024",
          }}
          fullWidth
          inputRef={tagsEl}
        />
        <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
        <RadioGroup
          row
          aria-labelledby="demo-row-radio-buttons-group-label"
          name="log-level-group"
          value={selectedLogLevel}
          onChange={onLogLevelChange}
          margin="normal"
        >
          <FormControlLabel value="trace" control={<Radio />} label="Trace" />
          <FormControlLabel value="debug" control={<Radio />} label="Debug" />
          <FormControlLabel value="info" control={<Radio />} label="Info" />
          <FormControlLabel value="warning" control={<Radio />} label="Warning" />
          <FormControlLabel value="error" control={<Radio />} label="Error" />
          <FormControlLabel value="critical" control={<Radio />} label="Critical" />
        </RadioGroup>
        <FormLabel id="demo-row-radio-buttons-group-label">CAN Bus</FormLabel>
        <FormGroup>
          <FormControlLabel control={
            <Checkbox
              checked={canbusEnabled}
              onChange={onCANBusChange}
            />
          } label="CAN Bus Enabled" />
          <TextField
            id="max_mem_buffer_size"
            name="max_mem_buffer_size"
            label='Max Memory Buffer Size (0 uses default size)'
            value={maxMemBufferSize}
            onChange={onMaxMemBufferSizeChange}
            variant="outlined"
            margin="normal"
            inputProps={{
              maxLength: "12",
            }}
            type="number"
            disabled={!canbusEnabled}
            required
            fullWidth
          />
          <FormControlLabel control={
            <Checkbox
              checked={dataLoggerEnabled}
              onChange={onDataLoggerChange}
              disabled={!canbusEnabled}
            />
          } label="Data Logger Enabled" />
        </FormGroup>
        <TextField
          id="max_disk_buffer_size"
          name="max_disk_buffer_size"
          label='Max Disk Buffer Size (0 uses default size)'
          value={maxDiskBufferSize}
          onChange={onMaxDiskBufferSizeChange}
          variant="outlined"
          margin="normal"
          inputProps={{
            maxLength: "12",
          }}
          type="number"
          disabled={!dataLoggerEnabled}
          required
          fullWidth
        />
        <div>
          <FormControlLabel control={
            <Checkbox
              checked={dtcEnabled}
              onChange={onDtcEnabledChange}
            />
          } label="DTC Enabled" />
        </div>
        <div>
          <FormControlLabel control={
            <Select
              native
              value={dtc_ttl}
              variant="outlined"
              inputProps={{
                name: "send-command",
                id: "send-command",
              }}
              disabled={!dtcEnabled}
              onChange={changeDtcTTL}
            >
              {dtcTtlList.map((item, index) => (
                <option key={index} value={item.value}>
                  {item.label}
                </option>
              ))}
            </Select>} />
        </div>
        <div>
          <FormControlLabel control={
            <Checkbox
              checked={dltEnabled}
              onChange={onDltEnabledChange}
            />
          } label="DLT Logging Enabled (supported from T.Rex 1.1.127)" />
        </div>
        {dltEnabled && (
          <div>
            <FormLabel id="dlt_level">DLT Log Level</FormLabel>
            <RadioGroup
              row
              aria-labelledby="dlt_level"
              name="dlt_level"
              value={dltLevel}
              onChange={onDltLevelChange}
              margin="normal"
              disabled={!dltEnabled}
            >
              <FormControlLabel value="0" control={<Radio />} label="Off" />
              <FormControlLabel value="1" control={<Radio />} label="Fatal" />
              <FormControlLabel value="2" control={<Radio />} label="Error" />
              <FormControlLabel value="3" control={<Radio />} label="Warn" />
              <FormControlLabel value="4" control={<Radio />} label="Info" />
              <FormControlLabel value="5" control={<Radio />} label="Debug" />
              <FormControlLabel value="6" control={<Radio />} label="Verbose" />
              <FormControlLabel value="255" control={<Radio />} label="Delete" />
            </RadioGroup>
          </div>
        )}
        {showDebugMask && (
          <TextField
            id="debug_mask"
            name="debug_mask"
            label="Debug Mask"
            InputLabelProps={{
              shrink: true
            }}
            defaultValue=""
            variant="outlined"
            margin="normal"
            inputProps={{
              maxLength: "255",
            }}
            fullWidth
            inputRef={debugMaskEl}
          />
        )}
        <FormControlLabel control={
          <Checkbox
            checked={idpsEnabled}
            onChange={onIDPSChange}
          />
        } label="IDPS Enabled" />
        <Button
          type="submit"
          disabled={busy}
          fullWidth
          variant="contained"
          color="primary"
          className={classes.submit}
          onClick={onSubmit}
        >
          Submit
        </Button>
      </form>
    </div>
  );
};

const VehicleUpdateForm = (props) => (
  <VehicleProvider>
    <MainForm {...props} />
  </VehicleProvider>
);

export default VehicleUpdateForm;
