import React from 'react';
import cn from 'classnames';
import Icon from '../icons';

import './scss/checkbox.scss';

export default class Checkbox extends React.Component {
  static defaultProps = {
    //variant: 'primary',
    disabled: false,
    checked: false,
    onChange: () => null,
  }

  constructor(props) {
    super(props);
    this.state = {
      // variant: props.variant,
      disabled: props.disabled,
      checked: props.checked,
      hovered: false,
    };
  }

  componentDidUpdate(prevProps) {
    const { checked } = this.props;
    if (prevProps.checked !== checked) {
      this.setState({ checked });
    }
  }

  handleClick = () => {
    const { onChange } = this.props;
    const { checked } = this.state;
    onChange(!checked);
    this.setState({ checked: !checked });
  }

  render() {
    const { disabled, checked, hovered } = this.state;
    const { children } = this.props;
    const checkboxClasses = cn({
      'omni-ui-general': true,
      'omni-checkbox': true,
      'omni-checkbox_disabled': disabled,
      'omni-checkbox_checked': checked,
      'omni-checkbox_hovered': !disabled && !checked && hovered,
    });
    const checkClasses = cn({
      'omni-checkbox__check': true,
      'omni-checkbox__check__hidden': !checked,
    });
  
    return (
      <div
        className={checkboxClasses}
        onClick={disabled ? null : this.handleClick}
        onMouseOver={() => this.setState({ hovered: true })}
        onMouseOut={() => this.setState({ hovered: false })}
      >
        {children
          ? children
          : <Icon
              className={checkClasses}
              name='check'
            />}
      </div>
    );
  }
}