// @flow
import React from 'react';
import { withRouter } from 'react-router';
import WalletBalance from 'component/walletBalance';
import TxoList from 'component/txoList';
import Page from 'component/page';
import Spinner from 'component/spinner';
import YrblWalletEmpty from 'component/yrblWalletEmpty';

type Props = {
  history: { action: string, push: string => void, replace: string => void },
  location: { search: string, pathname: string },
  balance: number,
};

const WalletPage = (props: Props) => {
  const { location, balance } = props;
  const { search } = location;
  const showIntro = balance === 0;
  const loading = balance === undefined;

  return (
    <Page>
      {loading && (
        <div className="main--empty">
          <Spinner delayed />
        </div>
      )}
      {!loading && (
        <>
          {showIntro ? (
            <YrblWalletEmpty includeWalletLink />
          ) : (
            <>
              <WalletBalance />
              <TxoList search={search} />
            </>
          )}
        </>
      )}
    </Page>
  );
};

export default withRouter(WalletPage);