import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Card, CardBody, CardHeader, Col, Row, Table,Pagination, PaginationItem, PaginationLink } from 'reactstrap';

import axios from 'axios';

const url = 'http://localhost:8099/';


function CertRow(props) {
  const certificate = props.certificate;
  const certLink = `/certificate/${certificate.serialNumbeSubejctr}`;
  const issLink = `/certificate/${certificate.serialNumberIssuerr}`;
  return (
    <tr key={certificate.id.toString()}>
      <th scope="row"><Link to={certLink}>{certificate.id}</Link></th>
      <td><Link to={certLink}>{certificate.serialNumbeSubejctr}</Link></td>
      <td><Link to={issLink}>{certificate.serialNumberIssuerr}</Link></td>
      <td>{certificate.startDate}</td>
      <td>{certificate.endDate}</td>
      <td>{certificate.name}</td>
      <td>{certificate.surname}</td>
    </tr>
  )
}

class Certificates extends Component {
  constructor(props) {
    super(props);
    this.state = {
      certificates: []
    };
  }

  componentDidMount()
  {
    axios({
      method: 'get',
      url: url  + 'certificates/getAllCertificates',
    }).then((response)=>{
      console.log(response);
      this.setState({certificates:response.data})
    },(error)=>{
      console.log(error);
    });
  }

  render() {

    const len = this.state.certificates.length;

    return (
      <div className="animated fadeIn">
        <Row>
          <Col xl={10}>
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i> Certificates
              </CardHeader>
              <CardBody>
                <Table responsive hover striped>
                  <thead>
                    <tr>
                      <th scope="col">Id</th>
                      <th scope="col">Serial number</th>
                      <th scope="col">Issuer serial number</th>
                      <th scope="col">Start date</th>
                      <th scope="col">End date</th>
                      <th scope="col">Name</th>
                      <th scope="col">Surname</th>
                    </tr>
                  </thead>
                  <tbody>
                    {this.state.certificates.map((certificate, index) =>
                      <CertRow key={index} certificate={certificate}/>
                    )}
                  </tbody>
                </Table>
                <nav>
                  <Pagination>
                    <PaginationItem><PaginationLink previous tag="button"></PaginationLink></PaginationItem>
                    <PaginationItem active>
                      <PaginationLink tag="button">1</PaginationLink>
                    </PaginationItem>
                    <PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
                    <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
                    <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
                    <PaginationItem><PaginationLink next tag="button"></PaginationLink></PaginationItem>
                  </Pagination>
                </nav>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    )
  }
}

export default Certificates;