import React from 'react';
import { Row, Col, ListGroup, ListGroupItem, Input, Button, Alert } from 'react-bootstrap';
import { updateDocument, removeDocument } from '../../api/documents/methods.js';

const handleUpdateDocument = ( documentId, event ) => {
  const title = event.target.value.trim();
  if ( title !== '' && event.keyCode === 13 ) {
    updateDocument.call({
      _id: documentId,
      update: { title: title }
    }, ( error, response ) => {
      if ( error ) {
        Bert.alert( error.reason, 'danger' );
      }
    });
  }
};

const handleRemoveDocument = ( documentId, event ) => {
  event.preventDefault();
  if ( confirm( 'Are you sure? This is permanent.' ) ) {
    removeDocument.call({
      _id: documentId
    }, ( error, response ) => {
      if ( error ) {
        Bert.alert( error.reason, 'danger' );
      } else {
        Bert.alert( 'Document removed!', 'success' );
      }
    });
  }
};

export const DocumentsList = ( { documents } ) => {
  if ( documents.length > 0 ) {
    return <ListGroup className="documents-list">
      {documents.map( ( { _id, title } ) => {
        return <ListGroupItem key={ _id }>
          <Row>
            <Col xs={ 8 } sm={ 10 }>
              <Input
                type="text"
                standalone
                defaultValue={ title }
                onKeyUp={ handleUpdateDocument.bind( this, _id ) }
              />
            </Col>
            <Col xs={ 4 } sm={ 2 }>
              <Button
                bsStyle="danger"
                className="btn-block"
                onClick={ handleRemoveDocument.bind( this, _id ) }>
                Remove
              </Button>
            </Col>
          </Row>
        </ListGroupItem>;
      })}
    </ListGroup>;
  } else {
    return <Alert bsStyle="warning">No documents yet.</Alert>;
  }
};