import { h, Component } from 'preact'

import NewFolder from '../../containers/newFolder.js'
import FolderList from '../../containers/folderList.js'
import FileList from '../../containers/fileList.js'

export default function BrowserView (props) {
  const openFolders = (props.openFolders || []).map((folder_id) => {
    const folder_list = props.folders.filter(folder => folder.id === folder_id)
    if (! folder_list.length) return
    const folder = folder_list[0]
    return (
      <FileList folder={folder} />
    )
  })
  
  return (
    <div class='column'>
      <NewFolder />
      <FolderList />
      {openFolders}
    </div>
  )
}