import React from "react";
import { Table, Link, Accordion } from "mesh-component-library";
import "./style.css";

function createLink(url) {
  return (
    <Link
      href={url}
      target="_blank"
      rel="noopener noreferrer"
    >
      Click this link
    </Link>
  );
}

const rowData = {
  basecomp: [
    {
      reportname: "Concourse to Optimus Balancing Reports",
      linktoreport: createLink("https://app.powerbi.com/groups/2845276b-c4f3-48f9-b77f-056b5b7f573f/reports/d06928e8-d070-4a11-bdfd-8cddfb74c759"),
    },
    // ...
  ],
  misc: [
    {
      reportname: "EA AB Report",
      linktoreport: createLink("https://app.powerbi.com/groups/2845276b-c4f3-48f9-b77f-056b5b7f573f/reports/46b8bfed-cfef-441f-89b9-64947e88274e/ReportSection311383bf1349f2f90e46"),
    },
    // ...
  ],
  basecompASC: [
    {
      reportname: "FPP to Gemini Balancing Reports",
      linktoreport: createLink("https://app.powerbi.com/groups/2845276b-c4f3-48f9-b77f-056b5b7f573f/reports/0431d04c-e6d9-469e-ae8b-3701b6c39c04/ReportSection0d7b88683608104b8175"),
    },
  ],
};

function PowerbiReports() {
  const columnsData = [
    { Header: "Report Name", accessor: "reportname", highlighted: true },
    { Header: "Link", accessor: "linktoreport" },
  ];

  return (
    <>
      <div className="main">
        <Accordion
          borderLeft="blue"
          borderTop="default"
          collapseOthers
          isBordered
          variant="white"
          className="child"
        >
          <Accordion.Item
            headerTitle="APAY PowerBI Reports - BaseComp Balancing"
          >
            <Table
              columns={columnsData}
              data={rowData.basecomp}
              className="power-bi-reports"
            />
          </Accordion.Item>
          <Accordion.Item
            headerTitle="APAY PowerBI Reports - Other Balancing Reports"
          >
            <Table
              columns={columnsData}
              data={rowData.misc}
              className="power-bi-reports"
            />
          </Accordion.Item>
          <Accordion.Item
            headerTitle="APAY PowerBI Reports - ASC BaseComp Balancing"
          >
            <Table
              columns={columnsData}
              data={rowData.basecompASC}
              className="power-bi-reports"
            />
          </Accordion.Item>
        </Accordion>
      </div>
    </>
  );
}

export default PowerbiReports;