import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { I18n as I18nDecorator } from '@procore/core-react';
import styles from './styles.scss';

const ToggleButtons = ({ isRange, setIsRange, I18n }) => (
  <div className={styles['toggle-buttons']}>
    <button
      id='single-day-btn'
      className={cx(styles['toggle-buttons__button'], {
        [styles['toggle-buttons__button__selected']]: !isRange
      })}
      onClick={() => setIsRange(false)}
    >
      {I18n.t('views.global.single_day')}
    </button>
    <button
      id='date-range-day-btn'
      className={cx(styles['toggle-buttons__button'], {
        [styles['toggle-buttons__button__selected']]: isRange
      })}
      onClick={() => setIsRange(true)}
    >
      {I18n.t('views.global.date_range')}
    </button>
  </div>
);

ToggleButtons.propTypes = {
  isRange: PropTypes.bool,
  setIsRange: PropTypes.func
};

export default I18nDecorator.withConsumer(ToggleButtons);