import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import Box from "@mui/material/Box";
import * as Juce from "juce-framework-frontend";
// import Checkbox from "@mui/material/Checkbox";
// import FormGroup from "@mui/material/FormGroup";
// import FormControlLabel from "@mui/material/FormControlLabel";
import { controlParameterIndexAnnotation } from "../types/JuceTypes.js";
// import { ToggleSwitch } from "./ToggleSwitch.js";

export default function JuceCheckbox({ identifier }) {
  JuceCheckbox.propTypes = {
    identifier: PropTypes.string,
  };

  const checkboxState = Juce.getToggleState(identifier);

  const [value, setValue] = useState(checkboxState.getValue());
  // eslint-disable-next-line no-unused-vars
  const [properties, setProperties] = useState(checkboxState.properties);

  // const handleChange = (event) => {
  //   checkboxState.setValue(event.target.checked);
  //   setValue(event.target.checked);
  // };
  const handleChange = (value) => {
    checkboxState.setValue(value);
    setValue(value);
  };

  useEffect(() => {
    const valueListenerId = checkboxState.valueChangedEvent.addListener(() => {
      setValue(checkboxState.getValue());
    });
    const propertiesListenerId =
      checkboxState.propertiesChangedEvent.addListener(() =>
        setProperties(checkboxState.properties)
      );

    return function cleanup() {
      checkboxState.valueChangedEvent.removeListener(valueListenerId);
      checkboxState.propertiesChangedEvent.removeListener(propertiesListenerId);
    };
  });

  // const cb = <Checkbox checked={value} onChange={handleChange} />;
  // const cb = <ToggleSwitch value={value} onChange={handleChange} />;
  return (
    <Box
      margin={0}
      padding={0}
      {...{
        [controlParameterIndexAnnotation]:
          checkboxState.properties.parameterIndex,
      }}
    >
      <div className="flex gap-2">
        <button
          onClick={() => handleChange(true)}
          className={`px-8 py-3 rounded transition-colors transition-shadow relative overflow-hidden ${
            value
              ? `bg-primary text-[#1a1a1a] shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]`
              : `bg-[#1a1a1a] text-primary border-2 border-[#2a2a2a] shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]`
          }`}
        >
          {!value && (
            <div className="absolute -top-1/4 left-0 right-0 h-3/4 bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none blur-[2px]" />
          )}
          <span className="relative z-10">ON</span>
        </button>
        <button
          onClick={() => handleChange(false)}
          className={`px-8 py-3 rounded transition-colors transition-shadow relative overflow-hidden ${
            !value
              ? `bg-primary text-[#1a1a1a] shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]`
              : `bg-[#1a1a1a] text-primary border-2 border-[#2a2a2a] shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]`
          }`}
        >
          {value && (
            <div className="absolute -top-1/4 left-0 right-0 h-3/4 bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none blur-[2px]" />
          )}
          <span className="relative z-10">OFF</span>
        </button>
      </div>
      {/* <ToggleSwitch value={value} onChange={handleChange} /> */}
      {/* <FormGroup>
        <FormControlLabel control={cb} />
      </FormGroup> */}
    </Box>
  );
}
