import React, { useState, useEffect } from "react";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import * as ReactBootstrap from "react-bootstrap";
import filterFactory from "react-bootstrap-table2-filter";
import ToolkitProvider, {
  Search,
  CSVExport,
} from "react-bootstrap-table2-toolkit";

// Main table for the Historical migrations tab,
// receives all API information and displays as a table with a searchbox

const CompTable = (props) => {
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(false);
  const { SearchBar } = Search;
  const { ExportCSVButton } = CSVExport;
  const sizePerPageRenderer = ({
    options,
    currSizePerPage,
    onSizePerPageChange,
  }) => (
    <div className="btn-group" role="group">
      {options.map((option) => {
        const isSelect = currSizePerPage === `${option.page}`;
        return (
          <button
            key={option.text}
            type="button"
            onClick={() => onSizePerPageChange(option.page)}
            className={`btn ${isSelect ? "btn-secondary" : "btn-success"}`}
          >
            {option.text}
          </button>
        );
      })}
    </div>
  );

  const getListData = async () => {
    try {
      const data = await props.data;
      setList(data.data);
      setLoading(true);
    } catch (e) {
      console.log(e);
    }
  };
  const options = {
    paginationSize: 4,
    pageStartIndex: 0,
    // alwaysShowAllBtns: true, // Always show next and previous button
    // withFirstAndLast: false, // Hide the going to First and Last page button
    // hideSizePerPage: true, // Hide the sizePerPage dropdown always
    // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
    firstPageText: "First",
    prePageText: "Back",
    nextPageText: "Next",
    lastPageText: "Last",
    nextPageTitle: "First page",
    prePageTitle: "Pre page",
    firstPageTitle: "Next page",
    lastPageTitle: "Last page",
    showTotal: true,
    disablePageTitle: true,
    sizePerPageList: [
      {
        text: "50",
        value: 50,
      },
      {
        text: "100",
        value: 100,
      },
    ],
    sizePerPageRenderer, // A numeric array is also available. the purpose of above example is custom the text
  };

  let columns = [
    {
      dataField: "domain",
      text: "Domain",
      sort: true,
      formatter: (cell, row) => <a href={"migrations/" + row.id}> {cell} </a>,
    },
    { dataField: "id", text: "ID", hidden: true },
    { dataField: "brand", text: "Brand", sort: true },
    { dataField: "migration_status", text: "Status", sort: true },
    {
      dataField: "ticket_id",
      text: "TicketID",
      sort: true,
      formatter: (cell, row) => (
        <a
          href={
            row.brand === "VentraIP"
              ? "https://helpdesk.ventraip.com.au/profiles/ticket/" +
                row.ticket_id
              : row.brand === "Zuver"
              ? "https://helpdesk.zuver.net.au/profiles/ticket/" + row.ticket_id
              : row.brand === "Synergy"
              ? "https://helpdesk.synergywholesale.com/profiles/ticket/" +
                row.ticket_id
              : null
          }
          target="_blank"
          rel="noreferrer"
        >
          {" "}
          {cell}{" "}
        </a>
      ),
    },
    { dataField: "booked_date", text: "Booked Date", sort: true },
    { dataField: "agent_booked", text: "Agent initials", sort: true },
    { dataField: "additional_domains", text: "Additional Domains", sort: true },
    { dataField: "username", text: "Username", sort: true },
    { dataField: "migration_type", text: "Type", sort: true },
    { dataField: "original_server", text: "Original Server", sort: true },
    { dataField: "new_server", text: "New Server", sort: true },
    // { dataField: "notes", text: "Notes", sort: true },
  ];

  useEffect(() => {
    getListData();
  }, []);

  return (
    <div>
      {loading ? (
        <ToolkitProvider
          keyField="name"
          data={list}
          columns={columns}
          search
          exportCSV
          key={columns.id}
          width="100%"
          exportCSV={{
            fileName: "migrations.csv",
            noAutoBOM: false,
            exportAll: false,
            onlyExportFiltered: true,
          }}
        >
          {(props) => (
            <div>
              <div className="serSec">
                <h3 className="hdrOne"></h3>
                <SearchBar {...props.searchProps} key={columns} />
              </div>

              <div className="table-responsive">
                <BootstrapTable
                  {...props.baseProps}
                  filter={filterFactory()}
                  pagination={paginationFactory(options)}
                  striped
                  hover
                  condensed
                  key={columns.id}
                  keyField="id"
                  wrapperClasses="table-responsive"
                  rowClasses="text-nowrap"
                />
              </div>
              <ExportCSVButton {...props.csvProps} key={columns}>
                Export CSV!!
              </ExportCSVButton>
            </div>
          )}
        </ToolkitProvider>
      ) : (
        <ReactBootstrap.Spinner animation="border" />
      )}
    </div>
  );
};

export default CompTable;