text: import React from "react";
  import classnames from "classnames";
  // javascript plugin used to create scrollbars on windows
  import PerfectScrollbar from "perfect-scrollbar";
  // reactstrap components
  import {
    Button,
    Card,
    CardHeader,
    CardBody,
    Label,
    FormGroup,
    Input,
    FormText,
    NavItem,
    NavLink,
    Nav,
    Table,
    TabContent,
    TabPane,
    Container,
    Row,
    Col,
    UncontrolledTooltip,
   
  } from "reactstrap";
  
  // core components
  import ExamplesNavbar from "components/Navbars/ExamplesNavbar.js";
  import Footer from "components/Footer/Footer.js";
  
  
  
  let ps = null;
  
  class ProfilePage extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        tabs: 1
      };
    }
    componentDidMount() {
      if (navigator.platform.indexOf("Win") > -1) {
        document.documentElement.className += " perfect-scrollbar-on";
        document.documentElement.classList.remove("perfect-scrollbar-off");
        let tables = document.querySelectorAll(".table-responsive");
        for (let i = 0; i < tables.length; i++) {
          ps = new PerfectScrollbar(tables[i]);
        }
      }
      document.body.classList.toggle("profile-page");
    }
    componentWillUnmount() {
      if (navigator.platform.indexOf("Win") > -1) {
        ps.destroy();
        document.documentElement.className += " perfect-scrollbar-off";
        document.documentElement.classList.remove("perfect-scrollbar-on");
      }
      document.body.classList.toggle("profile-page");
    }
    toggleTabs = (e, stateName, index) => {
      e.preventDefault();
      this.setState({
        [stateName]: index
      });
    };
    render() {
      return (
        <>
          <ExamplesNavbar />
          <div className="wrapper">
            <div className="page-header">
              <img
                alt="..."
                className="dots"
                src={require("assets/img/dots.png")}
              />
              <img
                alt="..."
                className="path"
                src={require("assets/img/path4.png")}
              />
              <Container className="align-items-center">
                <Row>
                  <Col lg="6" md="6">
                    <h1 className="profile-title text-left">Hi User</h1>
                    <small className="text-on-back">My Profile</small>
                    <p className="profile-description">
                      Offices parties lasting outward nothing age few resolve.
                      Impression to discretion understood to we interested he
                      excellence. Him remarkably use projection collecting. Going
                      about eat forty world has round miles.
                    </p>
                    <div className="btn-wrapper profile pt-3">
                      <Button
                        className="btn-icon btn-round"
                        color="twitter"
                        href=""
                        id="tooltip639225725"
                        target="_blank"
                      >
                        <i className="fab fa-twitter" />
                      </Button>
                      <UncontrolledTooltip delay={0} target="tooltip639225725">
                        Follow us
                      </UncontrolledTooltip>
                      <Button
                        className="btn-icon btn-round"
                        color="facebook"
                        href=""
                        id="tooltip982846143"
                        target="_blank"
                      >
                        <i className="fab fa-facebook-square" />
                      </Button>
                      <UncontrolledTooltip delay={0} target="tooltip982846143">
                        Like us
                      </UncontrolledTooltip>
                      <Button
                        className="btn-icon btn-round"
                        color="dribbble"
                        href=""
                        id="tooltip951161185"
                        target="_blank"
                      >
                        <i className="fab fa-dribbble" />
                      </Button>
                      <UncontrolledTooltip delay={0} target="tooltip951161185">
                        Follow us
                      </UncontrolledTooltip>
                    </div>
                  </Col>
                  <Col className="ml-auto mr-auto" lg="4" md="6">
                    <Card className="card-coin card-plain">
                      <CardHeader>
                        <img
                          alt="..."
                          className="img-center img-fluid rounded-circle"
                          src={require("assets/img/avatar.svg")}
                        />
                        <h4 className="title">Transactions</h4>
                      </CardHeader>
                      <CardBody>
                        <Nav
                          className="nav-tabs-primary justify-content-center"
                          tabs
                        >
                          <NavItem>
                            <NavLink
                              className={classnames({
                                active: this.state.tabs === 1
                              })}
                              onClick={e => this.toggleTabs(e, "tabs", 1)}
                              href="#pablo"
                            >
                              Courses
                            </NavLink>
                          </NavItem>
                          <NavItem>
                            <NavLink
                              className={classnames({
                                active: this.state.tabs === 2
                              })}
                              onClick={e => this.toggleTabs(e, "tabs", 2)}
                              href="#pablo"
                            >
                              Send
                            </NavLink>
                          </NavItem>
                          <NavItem>
                            <NavLink
                              className={classnames({
                                active: this.state.tabs === 3
                              })}
                              onClick={e => this.toggleTabs(e, "tabs", 3)}
                              href="#pablo"
                            >
                              News
                            </NavLink>
                          </NavItem>
                        </Nav>
                        <TabContent
                          className="tab-subcategories"
                          activeTab={"tab" + this.state.tabs}
                        >
                          <TabPane tabId="tab1">
                            <Table className="tablesorter" responsive>
                              <thead className="text-primary">
                                <tr>
                                  <th className="header">COIN</th>
                                  <th className="header">AMOUNT</th>
                                  <th className="header">VALUE</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  <td>BTC</td>
                                  <td>7.342</td>
                                  <td>48,870.75 USD</td>
                                </tr>
                                <tr>
                                  <td>ETH</td>
                                  <td>30.737</td>
                                  <td>64,53.30 USD</td>
                                </tr>
                                <tr>
                                  <td>XRP</td>
                                  <td>19.242</td>
                                  <td>18,354.96 USD</td>
                                </tr>
                              </tbody>
                            </Table>
                          </TabPane>
                          <TabPane tabId="tab2">
                            <Row>
                              <Label sm="3">Pay to</Label>
                              <Col sm="9">
                                <FormGroup>
                                  <Input
                                    placeholder="e.g. 1Nasd92348hU984353hfid"
                                    type="text"
                                  />
                                  <FormText color="default" tag="span">
                                    Please enter a valid address.
                                  </FormText>
                                </FormGroup>
                              </Col>
                            </Row>
                            <Row>
                              <Label sm="3">Amount</Label>
                              <Col sm="9">
                                <FormGroup>
                                  <Input placeholder="1.587" type="text" />
                                </FormGroup>
                              </Col>
                            </Row>
                            <Button
                              className="btn-simple btn-icon btn-round float-right"
                              color="primary"
                              type="submit"
                            >
                              <i className="tim-icons icon-send" />
                            </Button>
                          </TabPane>
                          <TabPane tabId="tab3">
                            <Table className="tablesorter" responsive>
                              <thead className="text-primary">
                                <tr>
                                  <th className="header">Latest Crypto News</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  <td>The Daily: Nexo to Pay on Stable...</td>
                                </tr>
                                <tr>
                                  <td>Venezuela Begins Public of Nation...</td>
                                </tr>
                                <tr>
                                  <td>PR: BitCanna – Dutch Blockchain...</td>
                                </tr>
                              </tbody>
                            </Table>
                          </TabPane>
                        </TabContent>
                      </CardBody>
                    </Card>
                  </Col>
                </Row>
              </Container>
              
            </div>
            <br /><br /><br />
           
            <Footer />
          </div>
        </>
      );
    }
  }
  
  export default ProfilePage;
  