import { forwardRef, type Ref,useImperativeHandle } from "react";
import * as DOMPurify from "dompurify";

import styles from "./styles.module.scss";

interface CheckBoxProps {
  label?: string;
  ariaLabel?: string;
  ariaHidden?: boolean | false;
  tabIndex?: number;
  value?: boolean;
  onChange?: (value: boolean) => void;
  onError?: (error: string) => void;
}

const Checkbox = (
  { label, ariaLabel, ariaHidden, tabIndex, value, onChange }: CheckBoxProps,
  ref: Ref<unknown> | undefined,
) => {
  function onChangeHandler(e: any) {
    if (onChange) onChange(e.target.checked);
  }

  function onKeyUpHandler(e: any) {
    if (e.key === "Enter") {
      if (onChange) onChange(!e.target.checked);
    }
  }

  useImperativeHandle(ref as Ref<unknown>, () => ({}));

  return (
    <div className={styles.checkbox}>
      <label>
        <input
          type="checkbox"
          role="checkbox"
          name="customCheckbox"
          aria-label={ariaLabel || label}
          onChange={onChangeHandler}
          checked={value}
          aria-checked={value}
          aria-hidden={ariaHidden}
          tabIndex={tabIndex || 0}
          onKeyUp={onKeyUpHandler}
        />
        <span className={styles.cbx}>
          <svg
            width="18"
            height="12"
            viewBox="0 0 20 15"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M2 6.375L7.625 12L18 1.625" />
          </svg>
        </span>
        <span
          className={styles.label}
          tabIndex={-1}
          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(label || "") }}
        ></span>
      </label>
    </div>
  );
};

export default forwardRef(Checkbox);