import { h, Component } from 'preact'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import util from '../util'

import Group from './group.component'
import Param from './param.component'
import Loading from './loading.component'

export default function FolderList ({ db, path, emptyText }) {
  if (! db) return null
  if (db.loading || !db.data) {
    return (
      <div class='col folderList'>
        <Loading progress={db.progress} />
      </div>
    )
  } else if (! db.data.folders.length && emptyText) {
    return (
      <div class='col folderList'>
        {emptyText}
      </div>
    )
  }
  console.log(db.data.folders)
  const folders = db.data.folders.map(raw_folder => {
    const folder = db.data.folderLookup[raw_folder.id]
    const fileCount = folder.files ? folder.files.length : 0
    const [ className, size ] = util.hush_null(fileCount)
    return (
      <Param title={<Link to={path + folder.id + '/'}>{folder.name}</Link>}>
        <span className={className}>{fileCount} file{util.courtesy_s(fileCount)}</span>
      </Param>
    )
  })

  return (
    <div class='col folderList'>
      <Group title='Projects'>
        {folders}
      </Group>
    </div>
  )
}