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;
  }
`