import React, { useEffect, useState, CSSProperties } from "react";
import { ToggleBob, ToggleContainer } from "./styles";
/**
 * @param {{
 * bobStyle: CSSProperties,
 * value: boolean,
 * containerStyle: CSSProperties,
 * onClick: Function,
 * }} props - properties of Toggle Button Component
 */

const ToggleButtonComponent = (props) => {
  // active state

  const [active, setActive] = useState(true);

  // this useEffect runs to change the active state to whatever the user passes into the component as value

  useEffect(() => {
    props?.value && setActive(props?.value);
  }, [props?.value]);

  // useEffect that runs on state change and passes the state of active to the onClick param

  useEffect(() => {
    props.onClick && props?.onClick(active);
  }, [active]);
  return (
    <ToggleContainer
      style={{ ...props?.containerStyle }}
      className={active ? "active" : ""}
      onClick={() => {
        setActive(!active);
      }}
    >
      <ToggleBob
        style={{ ...props?.bobStyle }}
        className={active ? "active" : ""}
      />
    </ToggleContainer>
  );
};
export default ToggleButtonComponent;
