import { onNextPage, onPreviousPage } from '../../store/earnings.actions';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { selectTceChartVisibility } from '../../store/tceChart.selectors';
import cx from 'classnames';
import { CustomHtmlTitle } from 'app/shared/components/customHtmlTitle/customHtmlTitle';

export const TceChartPagination = () => {
  const { isNextVisible, isPreviousVisible } = useSelector(selectTceChartVisibility);
  const dispatch = useDispatch();

  const onNextClick = () => {
    if (isNextVisible) {
      dispatch(onNextPage());
    }
  };

  const onPreviousClick = () => {
    if (isPreviousVisible) {
      dispatch(onPreviousPage());
    }
  };

  return <div className="o-layout u-margin-right u-margin-md-right--none">
    <div className='u-margin-right--small'>
      <CustomHtmlTitle text="Previous month">
        <a
          className={cx('c-chart__arrow', { 'c-chart__arrow--disabled': !isNextVisible })}
          onClick={onNextClick}
        >
          <i className="icon-flat-arrow-left u-font-size--small" />
        </a>
      </CustomHtmlTitle>
    </div>
    <CustomHtmlTitle text="Next month">
      <a
        className={cx('c-chart__arrow', { 'c-chart__arrow--disabled': !isPreviousVisible })}
        onClick={onPreviousClick}
      ><i className="icon-flat-arrow-right u-font-size--small"/></a>
    </CustomHtmlTitle>
  </div>;
};