import React, { InputHTMLAttributes, ReactNode, Ref } from "react";

import "./Switch.css";
import { getClassName, getCN, randomId, renderProps } from "../utils";

import ButtonTouch from "../ButtonTouch/ButtonTouch";

export type ISwitch = {
  label?: boolean,
  stopPropagation?: boolean,
  checked?: boolean,
  onChange?: InputHTMLAttributes<HTMLInputElement>["onChange"],

  className?: string | undefined,
}
function Switch({
  label,
  stopPropagation = true,
  checked,
  onChange,

  className,
  ...props
}: {
  [x: string]: any;
}) {
  const [props_id,] = React.useState(randomId(props.id, `switch`));
  const [is_checked, setChecked] = React.useState<boolean>(checked || false)
  const handlerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setChecked(e.target.checked);
    if (onChange) onChange(e)
  }

  return (
    <ButtonTouch clickable={true} stopPropagation={stopPropagation}>
      <label htmlFor={props_id} className={getClassName(["Switch"], className)}>
        <input
          aria-label={props_id}
          id={props_id}
          checked={checked}
          onChange={handlerChange}
          {...props}
          type="checkbox"
        />
        <span
          className={getClassName(["Switch__in", `Background__secondary`])}
          data-label-off={label ? is_checked ? `I` : `O` : ``}
        ></span>
      </label>
    </ButtonTouch>
  );
}

export default Switch;