import React, { Component } from 'react';
import { Button, Modal, OverlayTrigger, Popover, Tooltip, Tab, Row, Col, Nav, NavItem, Form, FormGroup, Checkbox, ControlLabel, FormControl } from 'react-bootstrap';

class ModalComponent extends Component {
  render() {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = (
      <Tooltip id="modal-tooltip">
        wow.
      </Tooltip>
    );
    return (
      <Modal show={this.props.show} onHide={() => {this.props.hideModal()}}>
        <Modal.Header closeButton>
          <button className="btn facebook user-login">
            <i className="brand fa fa-facebook-square"></i>
            Facebook
            <i className="fa loading fa-spinner fa-spin fa-fw"></i>
          </button>
          <button style={{ marginTop: "20px" }} className="btn google user-login">
            <i className="brand fa fa-google-plus-square"></i>
            Google
            <i className="fa loading fa-spinner fa-spin fa-fw"></i>
          </button>
          <h2 style={{ marginTop: "25px", marginBottom: "23px" }}>
            <strong>
              <span>Alebo použite e-mail</span>
            </strong>
          </h2>
          <Tab.Container defaultActiveKey="first">
            <Row className="clearfix">
              <Col xs={12}>
                <Nav bsStyle="pills" className="reg-holder">
                  <NavItem eventKey="first" className="reg-button">
                    Prihlásenie
                  </NavItem>
                  <NavItem eventKey="second" className="reg-button">
                    Registrácia
                  </NavItem>
                </Nav>
              </Col>
              <Col xs={12}>
                <Tab.Content animation>
                  <Tab.Pane eventKey="first">
                    <Form horizontal className="reg-form">
                      <FormGroup controlId="formHorizontalEmail">
                        <Col xs={12}>
                          <FormControl type="email" placeholder="Email" />
                        </Col>
                      </FormGroup>
                      <FormGroup controlId="formHorizontalPassword">
                        <Col xs={12}>
                          <FormControl type="password" placeholder="Heslo" />
                          <a className="password-show">
                            <i className="fa fa-lg fa-eye"></i>
                          </a>
                        </Col>
                      </FormGroup>
                      <FormGroup>
                        <Col xs={12}>
                          <Checkbox>Zapamätať</Checkbox>
                        </Col>
                      </FormGroup>
                      <FormGroup>
                        <Col xs={12}>
                          <button type="submit" className="btn login user-login">
                            Prihlásiť sa
                          </button>
                        </Col>
                      </FormGroup>
                    </Form>
                  </Tab.Pane>
                  <Tab.Pane eventKey="second">
                    <Form horizontal className="reg-form">
                      <FormGroup controlId="formHorizontalEmail">
                        <Col xs={12}>
                          <FormControl type="email" placeholder="Email" />
                        </Col>
                      </FormGroup>
                      <FormGroup controlId="formHorizontalPassword">
                        <Col xs={12}>
                          <FormControl type="password" placeholder="Heslo" />
                        </Col>
                      </FormGroup>
                      <FormGroup controlId="formHorizontalPassword">
                        <Col xs={12}>
                          <FormControl type="password" placeholder="Zopakovať heslo" />
                        </Col>
                      </FormGroup>
                      <FormGroup controlId="formHorizontalPassword">
                        <Col xs={12}>
                          <FormControl type="name" placeholder="Celé meno" />
                        </Col>
                      </FormGroup>
                      <FormGroup>
                        <Col xs={12}>
                          <button type="submit" className="btn login user-login">
                            Zaregistrovať sa
                          </button>
                        </Col>
                      </FormGroup>
                    </Form>
                  </Tab.Pane>
                </Tab.Content>
              </Col>
            </Row>
          </Tab.Container>
        </Modal.Header>
      </Modal>
    )
  }
}
ModalComponent.propTypes = {
  hideModal: React.PropTypes.func.isRequired,
  show: React.PropTypes.bool.isRequired,
}

export default ModalComponent;