import React from 'react';
import lbryuri from 'lbryuri'
import {BusyMessage} from 'component/common'
import FileTile from 'component/fileTile'

class ChannelPage extends React.Component{
  componentDidMount() {
    this.fetchClaims(this.props)
  }

  componentWillReceiveProps(nextProps) {
    this.fetchClaims(nextProps)
  }

  fetchClaims(props) {
    if (props.claimsInChannel === undefined) {
      props.fetchClaims(props.uri)
    }
  }

  render() {
    const {
      claimsInChannel,
      claim,
      uri
    } = this.props

    let contentList
    if (claimsInChannel === undefined) {
      contentList = <BusyMessage message="Fetching content" />
    } else if (claimsInChannel) {
      contentList = claimsInChannel.length ?
        claimsInChannel.map((claim) => <FileTile key={claim.claim_id} uri={lbryuri.build({name: claim.name, claimId: claim.claim_id})} />) :
        <span className="empty">No content found.</span>
    }

    return <main className="main--single-column">
      <section className="card">
        <div className="card__inner">
          <div className="card__title-identity"><h1>{uri}</h1></div>
        </div>
        <div className="card__content">
          <p>
            This channel page is a stub.
          </p>
        </div>
      </section>
      <h3 className="card-row__header">Published Content</h3>
      {contentList}
    </main>
  }
}

export default ChannelPage;