import { Grid, Slider, Switch } from "@material-ui/core";
import Typography from "@material-ui/core/Typography";

const tempMarks = [...[{ value: 0, label: "Off" }, { value: 1, label: "On" },],
...Array.from({ length: 26 }, (_, i) => {
  return { value: i + 2, label: `${i + 15}°C` }
})];

const valuetext = (value) => {
  return `${value}`;
}

const highMidLowOffMarks = [{
  value: 3, label: "High",
}, {
  value: 2, label: "Mid",
}, {
  value: 1, label: "Low",
}, {
  value: 0, label: "Off",
},]

const labelFunc = (marks) => (value) => marks.find(mark => mark.value === value)?.label;

const labelRemoved = (marks) => Array.from(marks).map((mark) => {
  return { value: mark.value }
})

const Commands = [
  { value: "doors_lock", label: "Lock doors" },
  { value: "doors_unlock", label: "Unlock doors" },
  { value: "flash_headlights", label: "Flash headlights" },
  { value: "trunk_close", label: "Close trunk" },
  { value: "alert", label: "Alert" },
  {
    value: "california_mode", label: "California mode", params: {
      dataFunc: (val, handleValChange) => {
        if (typeof val !== "boolean") {
          val = false
        }
        return <span>
          <Typography id="california_mode-slider" gutterBottom>
            Set California mode
          </Typography>
          <Typography component="div">
            <Grid component="label" container alignItems="center" spacing={1}>
              <Grid item>Off</Grid>
              <Grid item>
                <Switch checked={val} onChange={handleValChange} name="checkedC" />
              </Grid>
              <Grid item>On</Grid>
            </Grid>
          </Typography>
        </span>
      },
    },
  }, {
    value: "trunk_open", label: "Open trunk", params: {
      dataFunc: (val, handleValChange) => <span>
        <Typography id="trunk_open-slider" gutterBottom>
          Set trunk's openness level
        </Typography>
        <Slider
          defaultValue={1}
          value={val}
          getAriaValueText={valuetext}
          aria-label="Open trunk"
          aria-labelledby="trunk_open-slider"
          valueLabelDisplay="auto"
          step={1}
          marks
          size="small"
          min={1}
          max={5}
          onChange={handleValChange}
        />
      </span>,
    }
  }, {
    value: "temp_cabin", label: "Set cabin temperature(°C)", params: {
      dataFunc: (val, handleValChange) => {
        return <span>
          <Typography id="temp_cabin-slider" gutterBottom>
            Set cabin temperature
          </Typography>
          <Slider
            valueLabelFormat={labelFunc(tempMarks)}
            getAriaValueText={labelFunc(tempMarks)}
            defaultValue={0}
            value={val}
            aria-labelledby="temp_cabin-slider"
            valueLabelDisplay="auto"
            step={1}
            min={0}
            max={27}
            marks={labelRemoved(tempMarks)}
            size="small"
            onChange={handleValChange}
          />
        </span>
      }
    }
  }, {
    value: "defrost", label: "Defrost", params: {
      dataFunc: (val, handleValChange) => {
        if (typeof val !== "boolean") {
          val = false
        }
        return <span>
          <Typography id="defrost-slider" gutterBottom>
            Set defrost
          </Typography>
          <Typography component="div">
            <Grid component="label" container alignItems="center" spacing={1}>
              <Grid item>Off</Grid>
              <Grid item>
                <Switch checked={val} onChange={handleValChange} name="checkedC" />
              </Grid>
              <Grid item>On</Grid>
            </Grid>
          </Typography>
        </span>
      },

    },
  }, {
    value: "driver_seat_preheat", label: "Driver seat preheat", params: {
      dataFunc: (val, handleValChange) => <span>
        <Typography id="driver_seat_preheat-slider" gutterBottom>
          Set driver seat preheat
        </Typography>
        <Slider
          valueLabelFormat={labelFunc(highMidLowOffMarks)}
          getAriaValueText={labelFunc(highMidLowOffMarks)}
          defaultValue={0}
          value={val}
          aria-labelledby="driver_seat_preheat-slider"
          valueLabelDisplay="auto"
          step={null}
          min={0}
          max={3}
          marks={highMidLowOffMarks}
          size="small"
          onChange={handleValChange}
        />
      </span>,
    }
  }, {
    value: "passenger_seat_preheat", label: "Preheat passenger seat", params: {
      dataFunc: (val, handleValChange) => <span>
        <Typography id="passenger_seat_preheat-slider" gutterBottom>
          Set passenger seat preheat
        </Typography>
        <Slider
          valueLabelFormat={labelFunc(highMidLowOffMarks)}
          getAriaValueText={labelFunc(highMidLowOffMarks)}
          defaultValue={0}
          value={val}
          aria-labelledby="passenger_seat_preheat-slider"
          valueLabelDisplay="auto"
          step={null}
          min={0}
          max={3}
          marks={highMidLowOffMarks}
          size="small"
          onChange={handleValChange}
        />
      </span>,
    }
  }, {
    value: "steering_wheel_preheat", label: "Preheat Steering wheel", params: {
      dataFunc: (val, handleValChange) => {
        if (typeof val !== "boolean") {
          val = false
        }

        return <span>
          <Typography id="steering_wheel_preheat-slider" gutterBottom>
            Set steering wheel preheat on/off
          </Typography>
          <Typography component="div">
            <Grid component="label" container alignItems="center" spacing={1}>
              <Grid item>Off</Grid>
              <Grid item>
                <Switch checked={val} onChange={handleValChange} name="checkedC" />
              </Grid>
              <Grid item>On</Grid>
            </Grid>
          </Typography>
        </span>
      },

    },
  }, {
    value: "charging", label: "Charging", params: {
      dataFunc: (val, handleValChange) => {
        if (typeof val !== "boolean") {
          val = false
        }
        return <span>
          <Typography id="charging-slider" gutterBottom>
            Set charging on/off
          </Typography>
          <Typography component="div">
            <Grid component="label" container alignItems="center" spacing={1}>
              <Grid item>Off</Grid>
              <Grid item>
                <Switch checked={val} onChange={handleValChange} name="checkedC" />
              </Grid>
              <Grid item>On</Grid>
            </Grid>
          </Typography>
        </span>
      },

    },
  }]

export default Commands;
