import React from 'react'

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

export default function TodoRow(props) {
  const { categories, userId, onClick } = props
  const { name, category, votes, id, group } = props.rowData
  const voted = votes.includes(userId)
  const borderColor =
    categories[category].borderColor || categories[category].color

  return (
    <div
      onClick={() => {
        onClick(props.rowData)
      }}
      className={styles.row}
      style={{
        border: `2px dashed ${borderColor || 'white'}`,
        borderRadius: '3px',
      }}
    >
      <div className={styles.id}>{`#${id}`}</div>
      <div className={styles.description}>{name}</div>
      <div className={styles.catName}>
        <div
          style={{
            wordBreak: 'break-all',
            fontSize: '12px',
            backgroundColor: categories[category].color,
            color: 'white',
            borderRadius: '2px',
            padding: '3px',
          }}
        >
          {categories[category].name}
        </div>
      </div>
      <div
        className={`${styles.votes} ${voted && styles.voted}`}
      >{`Szavazatok: ${votes.length}`}</div>
    </div>
  )
}