import React from 'react'

import TodoRow from './todoRow.js'

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

export default function TodoBoard(props) {
  const { tables, cards, userId, categories, onClick } = props

  return (
    <div className={styles.tableContainer}>
      <div className={styles.table}>
        {Object.keys(tables).map((key) => {
          const table = tables[key]

          const tableCards = cards.filter((card) => {
            return card.state === key
          })

          return (
            <div className={styles.container} key={key}>
              <div className={styles.title}>{table.name}</div>
              {tableCards.map((card, i) => {
                return (
                  <TodoRow
                    onClick={onClick}
                    key={i}
                    type={key}
                    rowData={card}
                    userId={userId}
                    categories={categories}
                  />
                )
              })}
            </div>
          )
        })}
      </div>
    </div>
  )
}