import React from 'react';
import lbryuri from 'lbryuri'
import {
  BusyMessage,
} from 'component/common';
import ChannelPage from 'page/channel'
import FilePage from 'page/filePage'

class ShowPage extends React.Component{
  componentWillMount() {
    this.resolve(this.props)
  }

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

  resolve(props) {
    const {
      isResolvingUri,
      resolveUri,
      claim,
      uri,
    } = props

    if(!isResolvingUri && claim === undefined && uri) {
      resolveUri(uri)
    }
  }

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

    let innerContent = "";

    if (isResolvingUri || !claim) {
      innerContent = <section className="card">
        <div className="card__inner">
          <div className="card__title-identity"><h1>{uri}</h1></div>
        </div>
        <div className="card__content">
          { isResolvingUri && <BusyMessage message="Loading magic decentralized data..." /> }
          { claim === null && <span className="empty">There's nothing at this location.</span> }
        </div>
      </section>
    }
    else if (claim.name.length && claim.name[0] === '@') {
      innerContent = <ChannelPage uri={lbryuri.build({ name: claim.name, claimId: claim.claim_id })} />
    }
    else if (claim) {
      innerContent = <FilePage uri={uri} />
    }

    return (
      <main className="main--single-column">{innerContent}</main>
    )
  }
}

export default ShowPage