import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { selectCurrentPeriodName } from 'app/modules/bunkerAdjustment/store/bunkerAdjustment.selectors';
import { BunkerAdjustmentCalculationSteps } from './BunkerAdjustmentCalculationSteps';
import {
  selectBACurrentMonthCalculations, selectBACurrentMonthPerDayCalculations, selectBAPreviousPeriodsPerDayCalculations,
  selectBATotalCalculations, selectBATotalPerDayCalculations,
} from '../store/bunkerAdjustmentCalculations.selectors';
import BunkerAdjustmentCollapsible from './BunkerAdjustmentCollapsible';
import * as Text from 'app/shared/components/text/text';

const BunkerAdjustmentTotalCalculations = () => {
  const [ isPerDayBreakdownCollapsed, collapseBreakdown ] = useState(true);

  const periodName = useSelector(selectCurrentPeriodName);
  const bunkerAdjustmentTotalProps = useSelector(selectBATotalCalculations);
  const bunkerAdjustmentCurrentMonthProps = useSelector(selectBACurrentMonthCalculations);
  const bunkerAdjustmentTotalPerDayProps = useSelector(selectBATotalPerDayCalculations);
  const bunkerAdjustmentCurrentMonthPerDayProps = useSelector(selectBACurrentMonthPerDayCalculations);
  const bunkerAdjustmentPreviousPeriodsPerDayProps = useSelector(selectBAPreviousPeriodsPerDayCalculations);

  return (
    <div className="c-bunker-adjustment-calculations">
      <div className="u-margin-bottom">
        <Text.Paragraph extraClass="c-bunker-adjustment-calculations__header o-gutter-left u-uppercase">
          Total bunker adjustment for {periodName}
        </Text.Paragraph>
      </div>
      <BunkerAdjustmentCalculationSteps {...bunkerAdjustmentTotalProps} />
      <div className="o-gutter-left o-gutter-md-left--enormous">
        <div className="u-margin-top--medium u-margin-bottom">
          <Text.Paragraph size="small" extraClass="c-bunker-adjustment-calculations__header--sub o-gutter-left u-uppercase u-color--dark-grey">
            Bunker adjustment for {periodName}
          </Text.Paragraph>
        </div>
        <BunkerAdjustmentCalculationSteps {...bunkerAdjustmentCurrentMonthProps} />
      </div>
      <div className="u-margin-top--big u-margin-bottom">
        <Text.Paragraph extraClass="c-bunker-adjustment-calculations__header o-gutter-left u-uppercase">
          Total bunker adjustment for {periodName} / per day
        </Text.Paragraph>
      </div>
      <BunkerAdjustmentCalculationSteps {...bunkerAdjustmentTotalPerDayProps} />
      <BunkerAdjustmentCollapsible isCollapsed={isPerDayBreakdownCollapsed} onClick={collapseBreakdown} />
      {isPerDayBreakdownCollapsed ? null : <div className='o-gutter-left o-gutter-md-left--enormous'>
        <div className="u-margin-top u-margin-bottom">
          <Text.Paragraph size="small" extraClass='c-bunker-adjustment-calculations__header--sub o-gutter-left u-uppercase u-color--dark-grey'>
            Bunker adjustment for {periodName} per day
          </Text.Paragraph>
        </div>
        <BunkerAdjustmentCalculationSteps {...bunkerAdjustmentCurrentMonthPerDayProps} />
        <div className="u-margin-top--medium u-margin-bottom">
          <Text.Paragraph size="small" extraClass='c-bunker-adjustment-calculations__header--sub o-gutter-left u-uppercase u-color--dark-grey'>
            Adjustment for previous period
          </Text.Paragraph>
        </div>
        <BunkerAdjustmentCalculationSteps {...bunkerAdjustmentPreviousPeriodsPerDayProps} />
      </div>}
    </div>
  );
};

export { BunkerAdjustmentTotalCalculations };