import { h, Component } from 'preact'

import Folders from './Folders/Folders.jsx'
import Files from './Files/Files.jsx'

export default function BrowserView (props) {
  console.log('browser view', 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 (
      <Files
        folder={folder}
        onClose={() => props.closeFolder(folder)}
      />
    )
  })
  
  return (
    <div class='column'>
      <Folders folders={props.folders}
        openFolder={(folder) => props.openFolder(folder)}
        addFolder={(folder) => props.addFolder(folder)}
      />
      {openFolders}
    </div>
  )
}