import React, { Component } from "react";
import { Link } from "react-router-dom";
import BootstrapTable from "react-bootstrap-table-next";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import paginationFactory from "react-bootstrap-table2-paginator";

const columns = [
  {
    dataField: "user",
    text: "USER",
    headerClasses: "table-header-column",
    classes: "data-col dt-user"
  },
  {
    dataField: "email",
    text: "EMAIL",
    classes: "data-col dt-email email-column",
    headerClasses: "table-header-column email-column"
  },
  {
    dataField: "status",
    text: "VERIFIED STATUS",
    classes: "data-col dt-email",
    headerClasses: "table-header-column ",
    align: "left"
  },
  {
    dataField: "last_login",
    text: "LAST LOGIN",
    classes: "data-col dt-login",
    headerClasses: "table-header-column dt-login"
  },
  {
    dataField: "active",
    classes: "data-col dt-status",
    headerClasses: "table-header-column"
  },
  {
    dataField: "menu",
    classes: "data-col text-right",
    headerClasses: "table-header-column"
  }
];

const userData = [
  {
    user: { name: "Abu Bin Ishtiyak", id: "UD102001" },
    email: "info@softnio.com",
    verified: {
      email: 0,
      kyc: 1
    },
    last_login: "2018-08-24 10:20 PM",
    status: "active"
  },
  {
    user: { name: "Helena Walz", id: "UD102005" },
    email: "info@shericedigangi.com",
    verified: {
      email: 1,
      kyc: 0
    },
    last_login: "2018-08-24 09:20 AM",
    status: "active"
  },
  {
    user: { name: "Sherice Digangi", id: "UD102023" },
    email: "info@shericedigangi.com",
    verified: {
      email: 1,
      kyc: 1
    },
    last_login: "2018-08-11 12:20 PM",
    status: "suspended"
  },
  {
    user: { name: "Darren Square", id: "UD102028" },
    email: "info@darrensq.com",
    verified: {
      email: 1,
      kyc: 0
    },
    last_login: "2018-11-15 05:20 AM",
    status: "active"
  },
  {
    user: { name: "Darren Square", id: "UD102028" },
    email: "info@darrensq.com",
    verified: {
      email: 1,
      kyc: 0
    },
    last_login: "2018-11-15 05:20 AM",
    status: "active"
  },
  {
    user: { name: "Darren Square", id: "UD102028" },
    email: "info@darrensq.com",
    verified: {
      email: 1,
      kyc: 0
    },
    last_login: "2018-11-15 05:20 AM",
    status: "active"
  },
  {
    user: { name: "Darren Square", id: "UD102028" },
    email: "info@darrensq.com",
    verified: {
      email: 1,
      kyc: 0
    },
    last_login: "2018-11-15 05:20 AM",
    status: "active"
  }
];

class UserList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userData: [],
      isMenu: false
    };
  }

  componentDidMount() {
    this.setState(
      {
        userData
      },
      () => {
        this.getRows();
      }
    );
  }

  openMenu = () => {
    this.setState({
      isMenu: true
    });
  };

  getRows = () => {
    let rows = [];
    this.state.userData.map((item, id) => {
      rows.push({
        user: (
          <React.Fragment>
            <span className="lead">{item.user.name}</span>
            <span className="sub user-id">{item.user.id}</span>
          </React.Fragment>
        ),
        email: <span className="sub sub-s2 sub-email">{item.email}</span>,
        status: (
          <ul className="data-vr-list">
            <li>
              {item.verified.email === 1 ? (
                <div className="data-state data-state-sm data-state-approved" />
              ) : (
                <div className="data-state data-state-sm data-state-pending" />
              )}
              Email
            </li>
            <li>
              {item.verified.email === 1 ? (
                <div className="data-state data-state-sm data-state-approved" />
              ) : (
                <div className="data-state data-state-sm data-state-pending" />
              )}
              KYC
            </li>
          </ul>
        ),
        last_login: (
          <span className="sub sub-s2 sub-time">{item.last_login}</span>
        ),
        active:
          item.status === "active" ? (
            <span className="dt-status-md badge badge-outline badge-success badge-md">
              Active
            </span>
          ) : item.status === "suspended" ? (
            <span className="badge badge-outline badge-md badge-danger">
              Suspended
            </span>
          ) : (
            <span className="badge badge-outline badge-md badge-warning">
              Pending
            </span>
          ),
        menu: (
          <div className="relative d-inline-block">
            {/* <button onClick={this.openMenu} /> */}
            <button
              className="btn btn-light-alt btn-xs btn-icon"
              onClick={this.openMenu}
            >
              <span className="ti ti-more-alt" />
            </button>
          </div>
        )
      });
    });

    this.setState({ data: rows });
  };

  render() {
    console.log(this.state.isMenu);
    const customTotal = (from, to, size) => (
      <span className="react-bootstrap-table-pagination-total">
        {from}-{to} of {size}
      </span>
    );

    const options = {
      sizePerPage: 5,
      hideSizePerPage: true,
      hidePageListOnlyOnePage: true,
      nextPageText: "NEXT",

      prePageText: "PREV",
      showTotal: true,
      paginationTotalRenderer: customTotal
    };

    const rowClasses = (row, rowIndex) => {
      let classes = null;

      if (rowIndex % 2 == 0) {
        classes = "data-item odd";
      } else classes = "data-item even";

      return classes;
    };
    // this.addProducts(5);
    return (
      <div className="page-content">
        <div className="container">
          <div className="card content-area">
            <div className="card-innr">
              <div className="card-head">
                <h4 className="card-title">User List</h4>
              </div>
              <div>
                {this.state.data && this.state.data.length > 0 && (
                  <BootstrapTable
                    classes="data-table dt-init user-list"
                    rowClasses={rowClasses}
                    keyField="user"
                    pagination={paginationFactory(options)}
                    data={this.state.data}
                    columns={columns}
                    bordered={false}
                  />
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default UserList;