import { FC, useMemo } from 'react'
import styled from 'styled-components'
// import ReactTooltip from 'react-tooltip'

interface FreshMarkProps {
  deltSec: number
  name: string
  pm: string | undefined
  firstPMLarkLink?: string | undefined
}

const Wrapper = styled.div`
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin: 4px;
  height: 16px;
  box-sizing: border-box;
  padding: 2px 3px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 14px;
  font-weight: bold;
  transform: scale(0.9);
  transform-origin: left;
`
const DAY = 24 * 60 * 60
const Fresh = 7 * DAY
const Normal = 60 * DAY
const Warning = 180 * DAY
const Alert = 365 * DAY

export const FreshMark: FC<FreshMarkProps> = ({ deltSec, name, pm }) => {
  const [needDisplay, bgColor, dataTip] = useMemo(() => {
    let needDisplay = true
    let bgColor = '#9CA3AF'
    let dataTip = ''
    if (deltSec < Fresh) {
      bgColor = '#4ADE80'
      dataTip = 'NEW: < 7Day'
    } else if (deltSec < Normal) {
      // needDisplay = false
      bgColor = 'rgba(0,5,8,0.1)'
    } else if (deltSec < Warning) {
      bgColor = '#FACC15'
      dataTip = 'WARNING: > 60Day'
    } else if (deltSec < Alert) {
      bgColor = '#F87171'
      dataTip = 'ALERT: > 180Day'
    } else {
      bgColor = '#BE123C'
      dataTip = 'PANIC: > 365Day'
    }
    return [needDisplay, bgColor, dataTip]
  }, [deltSec])

  // const handleClick = useCallback(
  //   (e: React.MouseEvent<HTMLDivElement>) => {
  //     if (firstPMLarkLink) {
  //       e.preventDefault()
  //       e.stopPropagation()

  //       const a = document.createElement('a')
  //       a.setAttribute('href', firstPMLarkLink)
  //       a.setAttribute('target', '_blank')
  //       document.body.appendChild(a)
  //       a.click()
  //       a.remove()
  //     }
  //   },
  //   [firstPMLarkLink],
  // )

  return (
    <Wrapper
      style={{
        backgroundColor: needDisplay ? bgColor : 'transparent',
      }}
      data-tip={dataTip}
      data-for={name}
      // onClick={handleClick}
    >
      {pm || ''}
    </Wrapper>
  )
}