export default class UsageSummary extends React.Component {
  /**
   * @return {{}}
   */
  static get propTypes () {
    return {
      storage: PropTypes.instanceOf(Storage).isRequired
    };
  }

  /**
   * @return {Usage}
   */
  get #usage () {
    return this.props.storage.usage;
  }

  /**
   * @return {*}
   */
  render () {
    if (!this.props.storage.shop.hasUsageBasedPlan) {
      return null;
    }
    return (
      <Layout.Section>
        <Card sectioned>
          <Stack alignment="center">
            <Stack.Item fill>
              <TextStyle variation="strong">Current plan: {this.#currentPlanTitle}</TextStyle>
              <br/>
              Discounts applied to: {this.#countLine} unique products.
            </Stack.Item>
            <Stack.Item>
              <Button onClick={() => navigateTo(route.PLANS)}>
                Learn more
              </Button>
            </Stack.Item>
          </Stack>
        </Card>
      </Layout.Section>
    );
  }

  /**
   * @return {string}
   */
  get #currentPlanTitle () {
    let currentPlan = this.#usage.currentPlan;
    if (!currentPlan) {
      return 'Free';
    }
    return `${currentPlan.name}, ${currentPlan.priceFormatted}`;
  }

  /**
   * @return {string}
   */
  get #countLine () {
    let currentPlan = this.#usage.currentPlan;
    let topLimit = this.#usage.planTopLimit(currentPlan);
    if (topLimit) {
      return `${this.#usage.count}/${topLimit}`;
    } else {
      return `${currentPlan.usage_min} or more`;
    }
  }
}