import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';

import { Row, Col } from 'react-bootstrap';
import Button from '@folio/stripes-components/lib/Button';

class UserLoans extends React.Component {

  static propTypes = {
    data: PropTypes.shape({
      loansHistory: PropTypes.arrayOf(PropTypes.object),
    }),
    onClickViewOpenLoans: PropTypes.func.isRequired,
    onClickViewClosedLoans: PropTypes.func.isRequired,
  };

  static manifest = Object.freeze({
    loansHistory: {
      type: 'okapi',
      records: 'loans',
      GET: {
        path: 'circulation/loans?query=(userId=:{userid})',
      },
    },
    userid: {},
  });

  render() {
    const { data: { loansHistory } } = this.props;
    const openLoans = _.filter(loansHistory, loan => _.get(loan, ['status', 'name']) !== 'Closed');
    const closedLoans = _.filter(loansHistory, loan => _.get(loan, ['status', 'name']) === 'Closed');

    if (!loansHistory) return <div />;

    return (
      <div>
        <Row>
          <Col xs={7} sm={6}>
            <h3 className="marginTop0">Loans</h3>
          </Col>
          <Col xs={5} sm={6}>
            <div style={{ float: 'right' }}>
              <Button id="clickable-viewfullhistory" align="end" bottomMargin0 onClick={this.props.onClickViewOpenLoans}>View Loans</Button>
            </div>
          </Col>
        </Row>
        <ul>
          <li><Button id="clickable-viewcurrentloans" onClick={this.props.onClickViewOpenLoans}>{ openLoans.length } Current Loans</Button></li>
          <li><Button id="clickable-viewclosedloans" onClick={this.props.onClickViewClosedLoans}>{ closedLoans.length } Past Loans</Button></li>
        </ul>
      </div>);
  }
}

export default UserLoans;

@@ -973,17 +973,26 @@
 rn %3Cdiv 
-/
+%3ENada%3C/div
 %3E;%0A%0A    
@@ -1410,38 +1410,33 @@
 %0A          %3Cli%3E%3C
-Button
+a
  id=%22clickable-v
@@ -1447,24 +1447,32 @@
 urrentloans%22
+ href=%22%22
  onClick=%7Bth
@@ -1527,23 +1527,20 @@
 h %7D 
-Curr
+Op
 en
-t
  Loans%3C/
 Butt
@@ -1527,38 +1527,33 @@
 h %7D Open Loans%3C/
-Button
+a
 %3E%3C/li%3E%0A         
@@ -1558,22 +1558,17 @@
    %3Cli%3E%3C
-Button
+a
  id=%22cli
@@ -1590,16 +1590,24 @@
 edloans%22
+ href=%22%22
  onClick
@@ -1670,20 +1670,22 @@
 h %7D 
-Past
+Closed
  Loans%3C/
 Butt
@@ -1680,22 +1680,17 @@
  Loans%3C/
-Button
+a
 %3E%3C/li%3E%0A 

Use links instead of buttons. Fixes UIU-127.