import { formatDate } from '@transferwise/formatting';
import { useIntl } from 'react-intl';

import Chevron from '../../chevron';
import { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';

import messages from './DateTrigger.messages';
import { useContext, useId } from 'react';
import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
import Body from '../../body';
import IconButton from '../../iconButton';
import { Cross } from '@transferwise/icons';

interface DateTriggerProps {
  ariaLabelledBy?: string;
  selectedDate: Date | null;
  size: SizeSmall | SizeMedium | SizeLarge;
  placeholder: string;
  label: string;
  monthFormat: 'short' | 'long';
  disabled: boolean;
  onClick: () => void;
  onClear?: () => void;
  id?: string;
}

const DateTrigger: React.FC<DateTriggerProps> = ({
  selectedDate,
  size = Size.MEDIUM,
  placeholder,
  label,
  id,
  monthFormat,
  disabled,
  ariaLabelledBy,
  onClick,
  onClear,
}) => {
  const { locale, formatMessage } = useIntl();
  const valueIdPrefix = useId();
  const overlayId = useContext(OverlayIdContext);
  const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];

  return (
    <>
      <button
        id={id}
        aria-haspopup="dialog"
        aria-expanded={overlayId != null}
        aria-controls={overlayId}
        aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}
        className={`btn btn-${size} btn-input np-date-trigger`}
        disabled={disabled}
        type="button"
        onClick={onClick}
      >
        {label && (
          <Body as="span" className="np-date-trigger-label m-r-1" id={ariaLabelIds[1]}>
            {label}
          </Body>
        )}
        {selectedDate ? (
          <Body as="span" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>
            {formatDate(selectedDate, locale, {
              day: 'numeric',
              month: monthFormat,
              year: 'numeric',
            })}
          </Body>
        ) : (
          <span
            className="form-control-placeholder visible-xs-inline visible-sm-inline
                       visible-md-inline visible-lg-inline visible-xl-inline"
            id={ariaLabelIds[2]}
          >
            {placeholder}
          </span>
        )}
        {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}
      </button>
      {onClear ? (
        <>
          <div className="clearfix" />
          <span className="input-group-addon">
            <IconButton
              size={32}
              priority="minimal"
              className={`clear-btn clear-btn--${size}`}
              aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}
              onClick={(event) => {
                event.stopPropagation();
                event.preventDefault();
                onClear();
              }}
            >
              <Cross />
            </IconButton>
          </span>
        </>
      ) : null}
    </>
  );
};

export default DateTrigger;
