MotionInput.jsx

import React from "react";
import { useEffect, useState, startTransition } from "react";
import { useSelector } from "react-redux";
import { Switch } from "@raspberrypifoundation/design-system-react";
import Sk from "skulpt";
import "../../../assets/stylesheets/AstroPiModel.scss";
import { useTranslation } from "react-i18next";

const MotionInput = (props) => {
  const { defaultValue } = props;
  const [value, setValue] = useState(defaultValue);
  const codeRunTriggered = useSelector(
    (state) => state.editor.codeRunTriggered,
  );
  const { t } = useTranslation();

  useEffect(() => {
    if (!codeRunTriggered) {
      Sk.sense_hat.start_motion_callback = () => {};
      Sk.sense_hat.stop_motion_callback = () => {};
    }
  }, [codeRunTriggered]);

  useEffect(() => {
    if (Sk.sense_hat) {
      startTransition(() => {
        Sk.sense_hat.motion = value;
      });
    }
    value
      ? Sk.sense_hat.start_motion_callback()
      : Sk.sense_hat.stop_motion_callback();
  }, [value]);

  return (
    <div className="sense-hat-controls-panel__container">
      <label
        className="sense-hat-controls-panel__control-name"
        htmlFor={`sense_hat_motion`}
      >
        {t("output.senseHat.controls.motion")}
      </label>
      <div className="sense-hat-controls-panel__control-toggle">
        <label htmlFor={`sense_hat_motion`}>
          {t("output.senseHat.controls.motionSensorOptions.no")}
        </label>
        <Switch
          id="sense_hat_motion"
          name="senseHatMotionToggle"
          checked={value}
          onChange={(e) => setValue(e.target.checked)}
        />
        <label htmlFor={`sense_hat_motion`}>
          {t("output.senseHat.controls.motionSensorOptions.yes")}
        </label>
      </div>
    </div>
  );
};

export default MotionInput;