import classNames from 'classnames';
import React, { PropTypes } from 'react';

import Checkboxes from './Checkboxes';
import { KD_STATE, KD_COUNTRY } from '../../constants';

class CheckboxesButton extends React.Component {

  constructor(props) {
    super(props);
    this.state = { open: false };

    this.toggle = this.toggle.bind(this);
  }

  toggle(open) {
    this.setState(
      Object.assign({}, this.state, { open }),
    );
  }

  render() {
    const { type } = this.props;
    if (!(type === KD_STATE || type === KD_COUNTRY)) {
      return null;
    }

    return (
      <div className="c-kd-select-geography__checkboxes-buttons">
        <button
          className="c-kd-select-geography__checkboxes-button"
          onClick={(event) => {
            event.preventDefault();
            this.toggle(true);
          }}
        />
        <div
          onClick={() => this.toggle(false)}
          className={
            classNames(
              'c-kd-select-geography__overlay',
              { 'u-hidden': !this.state.open },
            )
          }
        />
        <div
          className={
            classNames(
              'c-kd-select-geography__popup-container',
              { 'u-hidden': !this.state.open },
            )
          }
        >
          <Checkboxes {...this.props} />
        </div>
      </div>
    );
  }
}

CheckboxesButton.propTypes = {
  type: PropTypes.string,
};

export default CheckboxesButton;
