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

export default function ControlsBar({ theme, checkAll, uncheckAll, close }) {
  return (
    <div
      className={
        classNames(
          'c-controls-bar',
          theme['c-controls-bar'],
        )
      }
    >
      <ul
        className={
          classNames(
            'c-controls-bar__list',
            theme['c-controls-bar__list'],
          )
        }
      >
        <li
          className={
            classNames(
              'c-controls-bar__item',
              theme['c-controls-bar__item'],
            )
          }
        >
          <button
            className={
              classNames(
                'c-controls-bar__button',
                theme['c-controls-bar__button'],
              )
            }
            onClick={(event) => {
              event.preventDefault();
              checkAll();
            }}
          >
            <span
              className={
                classNames(
                  'c-controls-bar__icon-check',
                  theme['c-controls-bar__icon-check'],
                )
              }
            />
            Check all
          </button>
        </li>
        <li
          className={
            classNames(
              'c-controls-bar__item',
              theme['c-controls-bar__item'],
            )
          }
        >
          <button
            className={
              classNames(
                'c-controls-bar__button',
                theme['c-controls-bar__button'],
              )
            }
            onClick={(event) => {
              event.preventDefault();
              uncheckAll();
            }}
          >
            <span
              className={
                classNames(
                  'c-controls-bar__icon-close',
                  theme['c-controls-bar__icon-close'],
                )
              }
            />
            Uncheck all
          </button>
        </li>
        <li
          className={
            classNames(
              'c-controls-bar__item-right',
              theme['c-controls-bar__item-right'],
            )
          }
        >
          <button
            className={
              classNames(
                'c-controls-bar__button',
                theme['c-controls-bar__button'],
              )
            }
            onClick={(event) => {
              event.preventDefault();
              close();
            }}
          >
            <span
              className={
                classNames(
                  'c-controls-bar__icon-circle-close',
                  theme['c-controls-bar__icon-circle-close'],
                )
              }
            />
          </button>
        </li>
      </ul>
    </div>
  );
}

ControlsBar.propTypes = {
  theme: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.func,
  ]).isRequired,
  checkAll: PropTypes.func,
  uncheckAll: PropTypes.func,
  close: PropTypes.func,
};
