/* @flow */ import React from 'react' import classnames from 'classnames' import DateTime from '../pb_kit/dateTime' import { globalProps } from '../utilities/globalProps' import Body from '../pb_body/_body' import Caption from '../pb_caption/_caption' import Icon from '../pb_icon/_icon' type TimeRangeInlineProps = { className?: string, id?: string, data?: string, alignment?: "left" | "center" | "vertical", size?: "sm" | "xs", dark?: boolean, icon?: boolean, timezone?: boolean, startTime: string, endTime: string, } const timezoneString = (dateValue) => { const date = new DateTime({ value: dateValue }) return `${date.convertToTimezone()}` } const dateTimestamp = (dateValue) => { const date = new DateTime({ value: dateValue }) return `${date.toHour()}:${date.toMinute()}${date.toMeridian()}` } const dateTimeIso = (dateValue) => { const date = new DateTime({ value: dateValue }) return date.toIso() } const TimeRangeInline = (props: TimeRangeInlineProps) => { const { className, alignment = 'left', size = 'sm', dark = false, icon = false, timezone = false, startTime, endTime, } = props const separator = ( ) const iconContent = () => { return ( ) } return (

{iconContent()} {` ${dateTimestamp( startTime )} `} {separator} {` ${dateTimestamp( endTime )} `} {timezoneString(endTime)} {iconContent()} {` ${dateTimestamp( startTime )} `} {separator} {` ${dateTimestamp( endTime )} `} {timezoneString(endTime)}

) } export default TimeRangeInline