import React from 'react';
import { useSelector } from 'react-redux';
import * as DataTable from 'app/shared/modules/tables/dataTable/dataTable';

import { selectPoolPointsAllocation } from '../store/poolPoints.selectors';
import { poolPointsColumns } from '../poolPoints.constants';
import { PoolPointsSummaryRow } from './tableComponents/poolPointsSummaryRow';
import { PoolPointsSummaryRowTotal } from './tableComponents/poolPointsSummaryRowTotal';
import { PoolPointsSummaryColumnsRow } from './tableComponents/poolPointsSummaryColumnsRow';
import { PoolPointsDataTable } from './tableComponents/poolPointsDataTable';


interface PoolPointsSummaryRowData {
  label: string,
  firstValue: string,
  secondValue: string,
}

const PoolPointsTable = () => {
  const data = useSelector(selectPoolPointsAllocation);

  const physicalRowData: PoolPointsSummaryRowData = {
    label: 'Pool Points based on Physical Specs',
    firstValue: data.physicalSpecs?.summary.map(item => item.value),
    secondValue: data.physicalSpecs?.summary.map(item => item.total),
  };

  const commercialRowData: PoolPointsSummaryRowData = {
    label: 'Pool Points based on Commercial flexibility',
    firstValue: data.commercialFlexibility?.summary.map(item => item.value),
    secondValue: data.commercialFlexibility?.summary.map(item => item.total),
  };

  const additionalRowData: PoolPointsSummaryRowData = {
    label: 'Pool Points based on Additional Trading',
    firstValue: data.additionalTrading?.summary.map(item => item.value),
    secondValue: data.additionalTrading?.summary.map(item => item.total),
  };

  const totalRowData = {
    physical: {
      label: 'Pool Points based on Physical Specs',
      firstValue: physicalRowData.firstValue,
    },
    commercial: {
      label: 'Pool Points based on Commercial flexibility',
      firstValue: commercialRowData.firstValue,
    },
    additional: {
      label: 'Pool Points based on Additional Trading',
      firstValue: additionalRowData.firstValue,
    },
    poolPoints: {
      label: 'Pool Points',
      firstValue: data.totalPoolPoints?.rows[0].value,
    },
    basePoints: {
      label: 'Base Points',
      firstValue: data.totalPoolPoints?.rows[1].value,
    },
    totalPoolPoints: {
      label: 'Total Pool Points',
      firstValue: data.totalPoolPoints?.summary[0].value,
    },
  };

  return (

    <>
      {data.physicalSpecs &&
        <>
          <h3 className={'c-pool-points-summary__header-text u-text__headline'}>PHYSICAL SPECS</h3>
          <PoolPointsDataTable data={data.physicalSpecs.rows} config={poolPointsColumns} >
            <PoolPointsSummaryRowTotal data={physicalRowData} secondValue/>
          </PoolPointsDataTable>
        </>
      }
      {data.commercialFlexibility &&
        <>
          <h3 className={'c-pool-points-summary__header-text u-text__headline u-margin-top--enormous'}>COMMERCIAL FLEXIBILITY</h3>
          <PoolPointsDataTable data={data.commercialFlexibility.rows} config={poolPointsColumns} >
            <PoolPointsSummaryRowTotal data={commercialRowData} secondValue/>
          </PoolPointsDataTable >
        </>
      }

      {data.additionalTrading &&
        <>
          <h3 className={'c-pool-points-summary__header-text u-text__headline u-margin-top--enormous'}>ADDITIONAL TRADING</h3>
          <PoolPointsDataTable data={data.additionalTrading.rows} config={poolPointsColumns} >
            <PoolPointsSummaryRowTotal data={additionalRowData} secondValue/>
          </PoolPointsDataTable >
        </>
      }
      {data.totalPoolPoints &&
        <>
          <h3 className={'c-pool-points-summary__header-text u-text__headline u-margin-top--enormous'}>TOTAL</ h3>
          <DataTable.ScrollableContainer extraClass='u-font--clear-spacings'>
            <PoolPointsSummaryColumnsRow />
            <PoolPointsSummaryRow data={totalRowData.physical} />
            <PoolPointsSummaryRow data={totalRowData.commercial} operator />
            {data.additionalTrading &&
              <PoolPointsSummaryRow data={totalRowData.additional} operator />
            }
            <PoolPointsSummaryRowTotal data={totalRowData.poolPoints} />
            <PoolPointsSummaryRow data={totalRowData.basePoints} extraClass='u-pool-points__summary--no-background u-font--clear-spacings u-margin-top--enormous u-margin-bottom' operator />
            <PoolPointsSummaryRowTotal data={totalRowData.totalPoolPoints} total />
          </DataTable.ScrollableContainer>
        </>
      }
    </>
  );

};

export { PoolPointsTable };