import React, { Component } from 'react';
import { Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
import axios from 'axios';

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

class Certificate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      certificate: {}
    };
  }

  componentDidMount()
  {
    const {id} = this.props.match.params;
    axios({
      method: 'get',
      url: url  + 'certificates/'+id,
    }).then((response)=>{
      console.log(response);
      this.setState({certificate:response.data})
    },(error)=>{
      console.log(error);
    });
  }

  render() {

    const certDetails = this.state.certificate ? Object.entries(this.state.certificate) : [['id', (<span><i className="text-muted icon-ban"></i> Not found</span>)]]

    return (
      <div className="animated fadeIn">
        <Row>
          <Col lg={8} xs = {12}>
            <Card>
              <CardHeader>
                <strong><i className="icon-info pr-1"></i>Certificate id: {this.props.match.params.id}</strong>
              </CardHeader>
              <CardBody>
                  <Table responsive striped hover>
                    <tbody>
                      {
                        certDetails.map(([key, value]) => {
                          return (
                            <tr key={key}>
                              <td>{`${key}:`}</td>
                              <td><strong>{value}</strong></td>
                            </tr>
                          )
                        })
                      }
                    </tbody>
                  </Table>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    )
  }
}

export default Certificate;