import React, { Component, PropTypes } from "react";
import { RaisedButton, CircularProgress } from "material-ui";
import numeral from "numeral";
import moment from "moment";

import getMuiTheme from "material-ui/styles/getMuiTheme";
import Spacing from "material-ui/styles/spacing";
import UCdefaultTheme from "../../themes/DefaultTheme";

const AccountSummary = ({
  AccountBalance,
  AccountBalanceAltMsg,
  DueNowBalance,
  DueNowBalanceAltMsg,
  FutureBalance,
  FutureBalanceAltMsg,
  LastPayment,
  LastPaymentDate,
  LastPaymentAltMsg,
  AccountInquiryUrl,
  MakePaymentUrl,
  TermBillUrl,
  PendingFinancialAidUrl,
  isFetching,
  Fault
}) => {
  function toMoneyString(num) {
    const formatter = new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2
    });

    return num ? formatter.format(num) : "Not Available";
  }

  const accountBalanceF = toMoneyString(AccountBalance),
    dueNowBalanceF = toMoneyString(DueNowBalance),
    futureBalanceF = toMoneyString(FutureBalance),
    lastPaymentBalanceF = toMoneyString(LastPayment),
    lastPaymentDateF = LastPaymentDate
      ? `paid ${new Date(LastPaymentDate).toLocaleString().split(",")[0]}`
      : "Date Not Available";

  const Balance = ({ label, amount, date, altMessage }) => (
    <div className="row">
      <div className="small-6 medium-6 large-6 columns">
        <div style={{ fontWeight: label === "You Owe:" && "bold" }}>
          {label}
        </div>
      </div>
      <div
        className="small-6 medium-6 large-6 columns"
        style={{ textAlign: "right" }}
      >
        <div style={{ fontWeight: label === "You Owe:" && "bold" }}>
          {amount}
          <br />
          {date}
        </div>
      </div>
      <span
        className="columns"
        style={{
          fontSize: "10px",
          fontStyle: "italic",
          textAlign: "right"
        }}
      >
        {altMessage}
      </span>
    </div>
  );

  return (
    <div className="container" style={{ padding: "20px" }}>
      <Balance
        label="You Owe:"
        amount={accountBalanceF}
        altMessage={AccountBalanceAltMsg}
      />
      <Balance
        label="Due Now:"
        amount={dueNowBalanceF}
        altMessage={DueNowBalanceAltMsg}
      />
      <Balance
        label="Future Due:"
        amount={futureBalanceF}
        altMessage={FutureBalanceAltMsg}
      />
      <br />
      <br />
      <Balance
        label="Last Payment:"
        amount={lastPaymentBalanceF}
        altMessage={LastPaymentAltMsg}
        date={lastPaymentDateF}
      />
      <div className="row" style={{paddingTop: "10px"}}>
      <div className="columns" style={{ marginBottom: "20px" }}>
        <RaisedButton
          label="View Pending Financial Aid"
          labelStyle={{ fontSize: "12px" }}
          secondary
          fullWidth
          href={PendingFinancialAidUrl}
        />
        </div>
        <div className="columns" style={{ marginBottom: "20px" }}>
        <RaisedButton
          label="View Semester Bill"
          labelStyle={{ fontSize: "12px" }}
          secondary
          fullWidth
          href={TermBillUrl}
        />
        </div>
      </div>
      <div className="row">
        <div className="columns" style={{ marginBottom: "20px" }}>
          <RaisedButton
            label="Account Inquiry"
            labelStyle={{ fontSize: "12px" }}
            secondary
            fullWidth
            href={AccountInquiryUrl}
          />
        </div>
        <div className="columns">
          <RaisedButton
            label="Make a payment"
            labelStyle={{ fontSize: "12px" }}
            secondary
            fullWidth
            target="_blank"
            rel="noopener"
            href={MakePaymentUrl}
          />
        </div>
      </div>
    </div>
  );
};

AccountSummary.propTypes = {
  AccountBalance: PropTypes.string,
  AccountBalanceAltMsg: PropTypes.string,
  DueNowBalance: PropTypes.string,
  DueNowBalanceAltMsg: PropTypes.string,
  FutureBalance: PropTypes.string,
  FutureBalanceAltMsg: PropTypes.string,
  LastPayment: PropTypes.string,
  LastPaymentDate: PropTypes.string,
  LastPaymentAltMsg: PropTypes.string,
  PendingFinancialAid: PropTypes.string,
  PendingFinancialAltMsg: PropTypes.string,
  isFetching: PropTypes.bool,
  Fault: PropTypes.array,
  AccountInquiryUrl: PropTypes.string,
  MakePaymentUrl: PropTypes.string,
  TermBillUrl: PropTypes.string,
  PendingFinancialAidUrl: PropTypes.string
};

export default AccountSummary;