import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { selectCurrentPeriodName } from 'app/modules/bunkerAdjustment/store/bunkerAdjustment.selectors';
import { BunkerAdjustmentCalculationSteps } from './BunkerAdjustmentCalculationSteps';
import * as Text from 'app/shared/components/text/text';
import {
  selectBABasketsDifferenceCalculations,
  selectBAScrubberBonusPerDayCalculations,
  selectBAScrubberConsumptionCalculations,
  selectBATotalScrubberCalculations,
} from '../store/bunkerAdjustmentScrubberCalculations.selectors';
import BunkerAdjustmentCollapsible from './BunkerAdjustmentCollapsible';

const BunkerAdjustmentScrubberCalculations = () => {
  const [ isBreakdownCollapsed, collapseBreakdown ] = useState(true);

  const periodName = useSelector(selectCurrentPeriodName);
  const totalScrubberProps = useSelector(selectBATotalScrubberCalculations);
  const basketDifferenceProps = useSelector(selectBABasketsDifferenceCalculations);
  const scrubberConsumptionProps = useSelector(selectBAScrubberConsumptionCalculations);
  const scrubberBonusPerDayProps = useSelector(selectBAScrubberBonusPerDayCalculations);

  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 vessel scrubber bonus for {periodName}
        </Text.Paragraph>
      </div>
      <BunkerAdjustmentCalculationSteps {...totalScrubberProps} />
      <BunkerAdjustmentCollapsible isCollapsed={isBreakdownCollapsed} onClick={collapseBreakdown} />
      {isBreakdownCollapsed ? 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'>
            Scrubber bonus for {periodName}
          </Text.Paragraph>
        </div>
        <BunkerAdjustmentCalculationSteps {...basketDifferenceProps} />
        <div className="o-gutter-top">
          <BunkerAdjustmentCalculationSteps {...scrubberConsumptionProps} />
        </div>
        <div className="o-gutter-top">
          <BunkerAdjustmentCalculationSteps {...scrubberBonusPerDayProps} />
        </div>
      </div>}
    </div>
  );
};

export { BunkerAdjustmentScrubberCalculations };