import React from 'react'
import styled from 'styled-components'
import { getNumberOfDays } from '../../../utility/common/DatesHelper'
const DAY = 'day'
const DAYS = 'days'
const AGO = 'ago'
const PASSED = 'passed'
const REMAINING = 'remaining'
export function renderCreatedAt(date) {
if (!date) return null
const now = new Date()
const diff = getNumberOfDays(date, now)
return `${diff} ${diff === 1 ? DAY : DAYS} ${AGO}`
}
export function renderDueDate(date) {
if (!date) return null
const now = new Date()
const diff = getNumberOfDays(now, date)
if (diff < 0) {
return (
<>
<div>{diff}</div>
<div>{diff === -1 ? DAY : DAYS}</div>
<div className="due-on--text">{PASSED}</div>
</>
)
} else {
return (
<>
<div>{diff}</div>
<div>{diff === 1 ? DAY : DAYS}</div>
<div className="due-on--text">{REMAINING}</div>
</>
)
}
}
export function renderTags(tags) {
return tags.map((tag, index) => (
<StyledTag tag={tag} index={index}></StyledTag>
))
}
function Tag({ tag, index, className }) {
const colors = ['green', 'blue', 'yellow', 'pink']
return <div className={`tag ${colors[index]} ${className}`}>{tag}</div>
}
const StyledTag = styled(Tag)`
margin-top: 6px;
display: inline-block;
font-size: 0.7rem;
padding: 3px 6px;
border-radius: 8px;
border: 1px solid #cccccc;
margin-right: 4px;
&.green {
background-color: #dff0d8;
}
&.blue {
background-color: #d9edf7;
}
&.yellow {
background-color: #fcf8e3;
}
&.pink {
background-color: #f2dede;
}
`