import React, { useRef } from 'react';
import { useSelector } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import { routes } from 'app/common/routes';
import { POOL_SECTION } from 'app/modules/pools/store';
import { TopNavigation } from 'app/modules/navigation/components/topNavigation';
import useGAClickTracking from '../../../shared/hooks/useGAClickTracking.hook';
import { selectEmbeddedBiReportData } from '../store/bi.selectors';
import useReports from '../../../shared/hooks/report.hooks';
import useIframeHotjarTracking from '../../../shared/hooks/useIframeHotjarTracking.hook';
import { SubHeader } from '../../../shared/components/topBar/subHeader';
import { BiYearFilterContainer } from '../conteiners/biYearFilter.container';
import CircleIcon from '../../../shared/components/circleIcon/circleIcon';
import { Report } from 'powerbi-report-component';

const reportStyle = {
  height: 754,
  paddingBottom: '2em',
};

const extraSettings = {
  filterPaneEnabled: false,
  navContentPaneEnabled: false,
};

const printButtonClickGAInfo = {
  eventCategory: 'OnPage function',
  eventAction: 'print',
  eventLabel: 'Reports',
};

const expandButtonClickGAInfo = {
  eventCategory: 'OnPage function',
  eventAction: 'full screen',
  eventLabel: 'Reports',
};

const ReportsPage = () => {
  const { token, reportId, reportUrl, filters } = useSelector(selectEmbeddedBiReportData);
  const {
    handleReportLoad,
    handleReportRender,
    handlePageChange,
    setFullscreen,
    printReport,
  } = useReports(filters);
  const reportRef = useRef<HTMLDivElement>(null);
  const buttonsContainerRef = useRef<HTMLDivElement>(null);
  useIframeHotjarTracking(reportRef?.current?.children[0]?.children[0] as HTMLIFrameElement);
  useGAClickTracking(buttonsContainerRef.current?.children[0], printButtonClickGAInfo);
  useGAClickTracking(buttonsContainerRef.current?.children[1], expandButtonClickGAInfo);

  return <>
    <div className="o-page-layout o-page-layout--sticky-header o-page-layout--aside">
      <header className="o-page-layout__header">
        <TopNavigation section={POOL_SECTION.REPORTS} />
      </header>
      <main className="o-page-layout__content o-page-layout__content--no-sub-header">
        <SubHeader headline="Reports">
          <div className="o-layout__item-12 o-layout__item-sm-6 o-layout__item-lg-4 u-margin-right--medium">
            <BiYearFilterContainer />
          </div>
          {reportUrl && reportId && token &&
                <div className='o-layout u-margin-top--small' ref={buttonsContainerRef}>
                  <CircleIcon
                    icon={'print'}
                    onClick={printReport}
                    noBackground
                    isSmall
                    extraClass={'u-margin-right--medium'}
                  />
                  <CircleIcon
                    icon={'expand'}
                    onClick={setFullscreen}
                    noBackground
                    isSmall
                  />
                </div>}
        </SubHeader>
        <Switch>
          <Route path={routes.reportsPoolRoute}>
            <div className="o-main-column u-margin-top--big">
              {reportUrl && reportId && token &&
                  <div ref={reportRef}>
                    <Report
                      reportMode="View"
                      tokenType="Embed"
                      accessToken={token}
                      embedUrl={reportUrl}
                      embedId={reportId}
                      pageName=""
                      extraSettings={extraSettings}
                      permissions="All"
                      style={reportStyle}
                      onLoad={handleReportLoad}
                      onRender={handleReportRender}
                      onPageChange={handlePageChange}
                    />
                  </div>}
            </div>
          </Route>
        </Switch>
      </main>
    </div>
  </>;
};

export default ReportsPage;