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

import { Typography } from '../../common';
import { useLayout } from '../../common/hooks';
import Title from '../../title';
import messages from '../DateLookup.messages';
import Button from '../../button/Button';
import { ChevronDown, ChevronLeft, ChevronRight } from '@transferwise/icons';
import IconButton from '../../iconButton';

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">
        <IconButton
          size={40}
          priority="minimal"
          className="d-inline-flex"
          aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}
          onClick={onPreviousClick}
        >
          <ChevronLeft className="left-single-direction" />
        </IconButton>
      </div>
      {label && (
        <Title type={Typography.TITLE_BODY} className="tw-date-lookup-header-current-container">
          <Button
            v2
            size="md"
            type="button"
            priority="tertiary"
            className="tw-date-lookup-header-current"
            aria-label={intl.formatMessage(messages.goTo20YearView)}
            addonEnd={{ type: 'icon', value: <ChevronDown /> }}
            onClick={onLabelClick}
          >
            {label}
          </Button>
        </Title>
      )}
      <div className="pull-right-single-direction">
        <IconButton
          size={40}
          className="d-inline-flex"
          aria-label={`${intl.formatMessage(messages.next)} ${dateMode}`}
          priority="minimal"
          onClick={onNextClick}
        >
          <ChevronRight className="right-single-direction" />
        </IconButton>
      </div>
    </div>
  );
};

export default DateHeader;