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

import { Loading, FileList, FileViewer } from '../../common'

import actions from '../actions'

class SequenceEditor extends Component {
  state = {
    dir: '/',
    files: [],
    loading: true
  }
  componentDidMount() {
    this.fetch(this.state.dir)
  }
  handlePick(file) {
    console.log(file)
    if (file.dir) {
      this.fetch([this.state.dir, file.name].join('/').replace('//','/'))
    } else {
      this.fetchFile([this.state.dir, file.name].join('/').replace('//','/'))
    }
  }
  fetch(dir) {
    console.log('fetch', dir)
    const { tool: module } = this.props.app
    this.setState({ dir, file: null, loading: true })
    actions.socket.list_directory({ module, dir }).then(files => {
      console.log(files)
      this.setState({ dir, files, loading: false })
    })
  }
  fetchFile(fn) {
    console.log('fetch file', fn)
    const { tool: module } = this.props.app
    this.setState({ file: null, loadingFile: true })
    actions.socket.read_file({ module, fn }).then(file => {
      console.log(file)
      this.setState({ file, loadingFile: false })
    })
  }
  render() {
    const { app } = this.props
    const {
      loading, dir, files,
      loadingFile, file,
    } = this.state
    console.log(this.props, this.state)
    // return (
    //   <div className='app browser'>
    //     <h1>{dir}{dir[dir.length-1] !== '/' && '/'}</h1>
    //     {app.tool}<br/>
    //     {loading && <Loading />}
    //     <FileList
    //       files={files}
    //       groupDirectories
    //       parentDirectory={dir !== '/'}
    //       orderBy='name asc'
    //       fields={'name datetime size'}
    //       onClick={(file, e) => {
    //         e.preventDefault()
    //         e.stopPropagation()
    //         console.log('picked a result', file)
    //         this.handlePick(file)
    //       }}
    //       onClickParent={e => {
    //         console.log('navigate up')
    //         this.fetch(this.state.dir.split('/').slice(0, -1).join('/') || '/')
    //       }}
    //     />
    //     {loadingFile && <Loading />}
    //     {file && <FileViewer file={file} />}
    //   </div>
    // )
  }
}

const mapStateToProps = state => ({
  app: state.system.app,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  actions: bindActionCreators({}, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(SequenceEditor)