import React, { useEffect } from 'react';
import './Checkbox.scss';

interface Props {
  form?: any;
  state?: any;
  key_?: number;
  name?: string;
  label?: string;
  setState?: any;
  disabled?: boolean;
  className?: string;
  useCheckmark?: boolean;
  inputToInitialize?: any;
  defaultChecked?: boolean;
  setInputToInitialize?: any;
  onChange?: (value: boolean) => object;
}

export const Checkbox: React.FC<Props> = ({
  key_,
  name,
  form,
  label,
  setState,
  className = '',
  disabled = false,
  inputToInitialize,
  onChange = () => {},
  useCheckmark = false,
  defaultChecked = false,
  setInputToInitialize,
  state = {},
}) => {
  const newState: any = Object.assign({}, state);
  const id: any = 'checkbox-' + key_;
  const checked: boolean = state.value;

  const handleChange = () => {
    if (!disabled) {
      newState.value = !checked;
      setState(newState);
      onChange(!checked);
    }
  };

  useEffect(() => {
    if (inputToInitialize === key_) {
      newState.name = name;
      newState.value = defaultChecked;
      setState(newState);
      setInputToInitialize(key_ + 1);
    }
  }, [inputToInitialize]);

  const input = (
    <input
      id={id}
      type="checkbox"
      onChange={handleChange}
      disabled={disabled}
      checked={checked}
      form={form}
    />
  );

  return (
    <div className="mo-display-checkbox">
      {useCheckmark ? (
        <label htmlFor={id} className="container">
          <span>{label}</span>
          {input}
          <span className="checkmark" />
        </label>
      ) : (
        <li className={className}>
          {input}
          <label htmlFor={id} />
          <span onClick={handleChange}>{label}</span>
        </li>
      )}
    </div>
  );
};