import { clsx } from 'clsx';
import { useIntl } from 'react-intl';

import Chevron from '../../chevron';
import { Position, Size, Typography } from '../../common';
import { useLayout } from '../../common/hooks';
import Title from '../../title';
import messages from '../DateLookup.messages';

const buttonClasses = 'btn-link p-a-0 text-no-decoration np-text-body-large-bold rounded-sm';

interface DateHeaderProps {
  label?: string;
  onLabelClick?: () => void;
  onPreviousClick: () => void;
  onNextClick: () => void;
  dateMode: string;
}

const DateHeader: React.FC<DateHeaderProps> = ({
  label,
  onLabelClick,
  onPreviousClick,
  onNextClick,
  dateMode,
}) => {
  const intl = useIntl();
  const { isMobile } = useLayout();
  return (
    <div className={clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>
      <div className="pull-left-single-direction">
        <button
          type="button"
          className={`d-inline-flex ${buttonClasses}`}
          aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}
          onClick={onPreviousClick}
        >
          <Chevron
            orientation={Position.LEFT}
            className="left-single-direction"
            size={Size.MEDIUM}
          />
        </button>
      </div>
      {label && (
        <Title type={Typography.TITLE_BODY} className="tw-date-lookup-header-current-container">
          <button
            type="button"
            className={`tw-date-lookup-header-current ${buttonClasses}`}
            aria-label={intl.formatMessage(messages.goTo20YearView)}
            onClick={onLabelClick}
          >
            {label}
          </button>
        </Title>
      )}
      <div className="pull-right-single-direction">
        <button
          type="button"
          className={`d-inline-flex ${buttonClasses}`}
          aria-label={`${useIntl().formatMessage(messages.next)} ${dateMode}`}
          onClick={onNextClick}
        >
          <Chevron
            orientation={Position.RIGHT}
            className="right-single-direction"
            size={Size.MEDIUM}
          />
        </button>
      </div>
    </div>
  );
};

export default DateHeader;
