// @flow
import * as ICONS from 'constants/icons';
import * as MODALS from 'constants/modal_types';
import * as PAGES from 'constants/pages';
import React from 'react';
import CreditAmount from 'component/common/credit-amount';
import Button from 'component/button';
import HelpLink from 'component/common/help-link';
import Card from 'component/common/card';
import Icon from 'component/common/icon';
import LbcSymbol from 'component/common/lbc-symbol';
import I18nMessage from 'component/i18nMessage';
import { formatNumberWithCommas } from 'util/number';
import { Lbryio } from 'lbryinc';
import moment from 'moment';

type Props = {
  balance: number,
  totalBalance: number,
  claimsBalance: number,
  supportsBalance: number,
  tipsBalance: number,
  doOpenModal: (string) => void,
  hasSynced: boolean,
  doFetchUtxoCounts: () => void,
  doUtxoConsolidate: () => void,
  fetchingUtxoCounts: boolean,
  consolidatingUtxos: boolean,
  consolidateIsPending: boolean,
  massClaimingTips: boolean,
  massClaimIsPending: boolean,
  utxoCounts: { [string]: number },
  accountDetails: any,
  transactions: any,
};

export const WALLET_CONSOLIDATE_UTXOS = 400;
const LARGE_WALLET_BALANCE = 100;

const WalletBalance = (props: Props) => {
  const {
    balance,
    claimsBalance,
    supportsBalance,
    tipsBalance,
    doOpenModal,
    hasSynced,
    doUtxoConsolidate,
    doFetchUtxoCounts,
    consolidatingUtxos,
    consolidateIsPending,
    massClaimingTips,
    massClaimIsPending,
    utxoCounts,
  } = props;

  // receive transactions from parent component
  let accountTransactions = props.transactions;

  // reverse so most recent payments come first
  if(accountTransactions){
    accountTransactions = accountTransactions.reverse();
  }

  const [detailsExpanded, setDetailsExpanded] = React.useState(false);
  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
  const [paymentHistoryTransactions, setPaymentHistoryTransactions] = React.useState();

  const [lastFour, setLastFour] = React.useState();


  const { other: otherCount = 0 } = utxoCounts || {};

  const totalBalance = balance + tipsBalance + supportsBalance + claimsBalance;
  const totalLocked = tipsBalance + claimsBalance + supportsBalance;
  const operationPending = massClaimIsPending || massClaimingTips || consolidateIsPending || consolidatingUtxos;

  React.useEffect(() => {
    if (balance > LARGE_WALLET_BALANCE && detailsExpanded) {
      doFetchUtxoCounts();
    }
  }, [doFetchUtxoCounts, balance, detailsExpanded]);

  var environment = 'test';

  function getAccountStatus(){
    return Lbryio.call(
      'account',
      'status',
      {
        environment
      },
      'post'
    );
  }

  function getPaymentHistory() {
    return Lbryio.call(
    'customer',
    'list',
    {
      environment,
    },
    'post'
  )};

  function getCustomerStatus(){
    return Lbryio.call(
      'customer',
      'status',
      {
        environment,
      },
      'post'
    )
  }

  React.useEffect(() => {


    (async function(){
      let response = await getPaymentHistory();

      const customerStatusResponse = await getCustomerStatus();

      setLastFour(customerStatusResponse.PaymentMethods[0].card.last4);

      if (response.length > 10) response.length = 10;

      setPaymentHistoryTransactions(response);

      console.log(response);
    })();
  }, []);

  return (
    <Card
      title={__('Payment History')}
      body={
        <>
          <div className="table__wrapper">
            <table className="table table--transactions">
              <thead>
              <tr>
                <th className="date-header">{__('Date')}</th>
                <th>{<>{__('Receiving Channel Name')}</>}</th>
                <th>{__('Tip Location')}</th>
                <th>{__('Amount (USD)')} </th>
                <th>{__('Card Last 4')}</th>
                <th>{__('Anonymous')}</th>
              </tr>
              </thead>
              <tbody>
              {paymentHistoryTransactions &&
              paymentHistoryTransactions.reverse().map((transaction) => (
                <tr key={transaction.name + transaction.created_at}>
                  <td>{moment(transaction.created_at).format('LLL')}</td>
                  <td>
                    <Button
                      className="stripe__card-link-text"
                      navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
                      label={transaction.channel_name}
                      button="link"
                    />
                  </td>
                  <td>
                    <Button
                      className="stripe__card-link-text"
                      navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
                      label={
                        transaction.channel_claim_id === transaction.source_claim_id
                          ? 'Channel Page'
                          : 'File Page'
                      }
                      button="link"
                    />
                  </td>
                  <td>${transaction.tipped_amount / 100}</td>
                  <td>{lastFour}</td>
                  <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
                </tr>
              ))}
              </tbody>
            </table>
          </div>
        </>
      }
    />
  );
};

export default WalletBalance;