import * as React from 'react'
import styled from '@emotion/styled'
import formatDate from 'intl-dateformat'
import { addMinutes } from 'date-fns'

import { Text, Box } from '~ui/core'
import { Slashes, Arrows } from '~ui/svg'

interface Props {
  from: Date
  to?: Date
  isPast?: boolean
}

const AUTOCHECKOUT_AFTER_MINUTES = 240

export const CheckinDates: React.FC<Props> = ({ from, to, isPast }) => {
  return (
    <Row>
      <Text>{formatDate(from, 'DD.MM.YYYY')}</Text>
      <Box width={1} />
      <Slashes />
      <Box width={1} />
      <Text>{formatDate(from, 'HH:mm')}</Text>
      {(to || isPast) && (
        <>
          <Box width={1} />
          <Arrows />
          <Box width={1} />
          <Text>
            {formatDate(
              to || addMinutes(from, AUTOCHECKOUT_AFTER_MINUTES),
              'HH:mm'
            )}
          </Text>
        </>
      )}
    </Row>
  )
}

const Row = styled('div')({
  display: 'flex',
  alignItems: 'baseline',
})