import React from "react";
import lbryio from "lbryio";
import { CreditAmount, Icon } from "component/common.js";
import SubHeader from "component/subHeader";
import { RewardLink } from "component/reward-link";

export class RewardTile extends React.Component {
  static propTypes = {
    type: React.PropTypes.string.isRequired,
    title: React.PropTypes.string.isRequired,
    description: React.PropTypes.string.isRequired,
    claimed: React.PropTypes.bool.isRequired,
    value: React.PropTypes.number.isRequired,
    onRewardClaim: React.PropTypes.func,
  };

  render() {
    return (
      <section className="card">
        <div className="card__inner">
          <div className="card__title-primary">
            <CreditAmount amount={this.props.value} />
            <h3>{this.props.title}</h3>
          </div>
          <div className="card__actions">
            {this.props.claimed
              ? <span><Icon icon="icon-check" /> {__("Reward claimed.")}</span>
              : <RewardLink {...this.props} />}
          </div>
          <div className="card__content">{this.props.description}</div>
        </div>
      </section>
    );
  }
}

export class RewardsPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      userRewards: null,
      failed: null,
    };
  }

  componentWillMount() {
    this.loadRewards();
  }

  loadRewards() {
    lbryio.call("reward", "list", {}).then(
      userRewards => {
        this.setState({
          userRewards: userRewards,
        });
      },
      () => {
        this.setState({ failed: true });
      }
    );
  }

  render() {
    return (
      <main className="main--single-column">
        <SubHeader />
        <div>
          {!this.state.userRewards
            ? this.state.failed
              ? <div className="empty">{__("Failed to load rewards.")}</div>
              : ""
            : this.state.userRewards.map(
                ({
                  reward_type,
                  reward_title,
                  reward_description,
                  transaction_id,
                  reward_amount,
                }) => {
                  return (
                    <RewardTile
                      key={reward_type}
                      onRewardClaim={this.loadRewards}
                      type={reward_type}
                      title={__(reward_title)}
                      description={__(reward_description)}
                      claimed={!!transaction_id}
                      value={reward_amount}
                    />
                  );
                }
              )}
        </div>
      </main>
    );
  }
}

export default RewardsPage;