import React from 'react'
import moment from 'moment'
import PropTypes from 'prop-types'

import Button from '../Button/Button'
import Icon from '../Icons/Icon'
import styles from './_selected-date.module.scss'

const SelectedDate = ({
  dateRangeSelected,
  startDate,
  endDate,
  singleDate,
  showCalendar,
}) => {
  return (
    <Button as='button' styleType='secondary'>
      {dateRangeSelected ? (
        <span>
          <span className={styles.dateDisplay}>
            {singleDate ? (
              <>
                {!showCalendar && <Icon icon='calendar' iconSize='16px' />}
                <span className={styles.dateString}>
                  {moment(startDate).format('MMM DD, YYYY')}
                </span>
              </>
            ) : (
              <span>
                {moment(startDate).format('MM/DD/YY')} to{' '}
                {moment(endDate).format('MM/DD/YY')}
              </span>
            )}
          </span>
          {showCalendar && <Icon icon='calendar' iconSize='16px' />}
        </span>
      ) : (
        <Icon icon='calendar' iconSize='16px' />
      )}
    </Button>
  )
}

export default SelectedDate

SelectedDate.propTypes = {
  dateRangeSelected: PropTypes.bool.isRequired,
  startDate: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.instanceOf(moment),
  ]),
  endDate: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.instanceOf(moment),
  ]),
  singleDate: PropTypes.bool,
}