import React from 'react'
import {
  connect
} from 'react-redux'
import {
  doNavigate,
} from 'actions/app'
import {
  doFetchFileInfo,
} from 'actions/file_info'
import {
  makeSelectFileInfoForUri,
} from 'selectors/file_info'
import {
  doFetchCostInfoForUri,
} from 'actions/cost_info'
import {
  makeSelectClaimForUri,
  makeSelectContentTypeForUri,
  makeSelectMetadataForUri,
} from 'selectors/claims'
import {
  makeSelectCostInfoForUri,
} from 'selectors/cost_info'
import FilePage from './view'

const makeSelect = () => {
  const selectClaim = makeSelectClaimForUri(),
        selectContentType = makeSelectContentTypeForUri(),
        selectFileInfo = makeSelectFileInfoForUri(),
        selectCostInfo = makeSelectCostInfoForUri(),
        selectMetadata = makeSelectMetadataForUri()

  const select = (state, props) => ({
    claim: selectClaim(state, props),
    contentType: selectContentType(state, props),
    costInfo: selectCostInfo(state, props),
    metadata: selectMetadata(state, props),
    fileInfo: selectFileInfo(state, props)
  })

  return select
}

const perform = (dispatch) => ({
  navigate: (path, params) => dispatch(doNavigate(path, params)),
  fetchFileInfo: (uri) => dispatch(doFetchFileInfo(uri)),
  fetchCostInfo: (uri) => dispatch(doFetchCostInfoForUri(uri)),
})

export default connect(makeSelect, perform)(FilePage)