/**
 * Create a uniform appearance for date and time displays
 * @module {Function} components/DateDisplay
 * @flow
 */
import * as React from 'react';
import typeOf from 'ramda/src/type';

const createDateDisplay = (getDisplay: (Date) => string, name: string) => {

  const DateDisplay = ({
    date,
  }: {
    date: Date | string | number,
  }): React.Node => {
    let dateDisplay = date;
    if (typeOf(date) === 'Number') {
      dateDisplay = (new Date(dateDisplay): Date);
    }
    if (dateDisplay instanceof Date) {
      dateDisplay = (getDisplay(dateDisplay): string);
    }
    return dateDisplay;
  };
  DateDisplay.displayName = name;

  return DateDisplay;
};

/**
 * Displays a date
 * @param {Date|string|number} $0.date - a date, string or timestamp to display
 * @returns {React.Node} <DateDisplay />
 */
export const DateDisplay = createDateDisplay(date => date.toLocaleDateString(), 'DateDisplay');

/**
 * Displays a time
 * @param {Date|string|number} $0.date - a date, string or timestamp to display
 * @returns {React.Node} <DateDisplay />
 */
export const TimeDisplay = createDateDisplay(date => date.toLocaleTimeString(), 'TimeDisplay');

/**
 * Displays a date and time
 * @param {Date|string|number} $0.date - a date, string or timestamp to display
 * @returns {React.Node} <DateDisplay />
 */
const DateTimeDisplay = createDateDisplay(date => date.toLocaleString(), 'DateTimeDisplay');

DateTimeDisplay.Date = DateDisplay;
DateTimeDisplay.Time = TimeDisplay;

export default DateTimeDisplay;