import React from 'react'

import styles from './todoCard.module.css'

const clickableTypes = ['todo', 'blocked', 'inprogress', 'testing']

export default function TodoCard(props) {
  const { categories, type, onClick, userId } = props
  const { name, description, category, points, votes, id } = props.cardData
  const clickable = clickableTypes.includes(type)
  const voted = votes.includes(userId)

  return (
    <div
      className={`${styles.card} ${clickable && styles.clickable} ${voted &&
        styles.voted}`}
      title={description}
      onClick={() => {
        if (clickable) {
          onClick(id)
        }
      }}
    >
      <div className={styles.description}>
        <span className={styles.id}>{`#${id}`}</span>
        {name}
      </div>
      <div className={styles.category}>
        <span
          style={{
            backgroundColor: categories[category].color,
            color: 'white',
            borderRadius: '2px',
            padding: '0px 2px',
          }}
        >
          {category}
        </span>
      </div>
      <div className={styles.numbers}>
        <div>
          <div>{`Votes: ${votes.length}`}</div>
        </div>
        <div>{points}</div>
      </div>
    </div>
  )
}