import React, { useEffect, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { selectBunkerAdjustmentConsumptionCalculations } from 'app/modules/bunkerAdjustment/store/bunkerConsumptionCalculations.selectors';
import { selectVesselName } from 'app/modules/vesselDetails/root/store/vesselDetails.selectors';
import { BunkerConsumptionCalculationsRows } from 'app/modules/bunkerAdjustment/components/BunkerConsumptionCalculationsRow';
import cx from 'classnames';

const consumptionRowLabels = [
  { text: 'LADEN' },
  { text: 'BALLAST' },
  { text: 'IDLE/LOAD' },
  { text: 'DISCHARGING' },
  { text: 'Total for full month', total: true },
];

const getTotalData = (data) => data.find(dataSet => dataSet.type === 'total');

const BunkerConsumptionCalculations = () => {
  const consumptionData = useSelector(selectBunkerAdjustmentConsumptionCalculations);
  const vesselName = useSelector(selectVesselName);

  const [ isScrollIndicatorVisible, setScrollIndicatorVisibility ] = useState(false);
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [ isScrollIndicatorIconVisible, setScrollIndicatorIconVisibility ] = useState(true);

  useEffect(() => {
    if (scrollContainerRef.current?.scrollWidth !== scrollContainerRef.current?.clientWidth) {
      setScrollIndicatorVisibility(true);
    }
  }, [ scrollContainerRef, consumptionData ]);

  const handleScroll = (event) => {
    if (event.target.scrollLeft === 0 && !isScrollIndicatorIconVisible) {
      setScrollIndicatorIconVisibility(true);
    } else if (isScrollIndicatorIconVisible) {
      setScrollIndicatorIconVisibility(false);
    }

    if (event.target.scrollWidth - event.target.clientWidth === event.target.scrollLeft && isScrollIndicatorVisible) {
      setScrollIndicatorVisibility(false);
    } else if (!isScrollIndicatorVisible) {
      setScrollIndicatorVisibility(true);
    }
  };

  const containerClassNames = cx(
    'c-bunker-consumption-calculations__container',
    { 'c-bunker-consumption-calculations__container--mobile': Boolean(navigator.maxTouchPoints) }
  );

  if (consumptionData === null) {
    return null;
  }

  return (
    <div>
      <div className="u-position--relative u-overflow--hidden">
        <div className='c-bunker-consumption-calculations__row-titles-wrapper'>
          {consumptionRowLabels.map(data => <BunkerConsumptionCalculationsRows.LabelRow 
            key={ data.text} text={data.text} total={data.total} />)}
        </div>
        {isScrollIndicatorVisible && <div className='c-bunker-consumption-calculations__scroll-indicator'>
          <div
            className='c-bunker-consumption-calculations__scroll-indicator-icon-container'>
            {isScrollIndicatorIconVisible && <div className='c-bunker-consumption-calculations__scroll-indicator-icon'>
              <i className='icon-flat-arrow-right' />
            </div>}
          </div>
        </div>}
        <div ref={scrollContainerRef} onScroll={handleScroll} className={containerClassNames}>
          <BunkerConsumptionCalculationsRows.ColumnLabelRow />
          {consumptionData.map(data => <BunkerConsumptionCalculationsRows.DataRow key={data.type} data={data}/>)}
          <BunkerConsumptionCalculationsRows.SummaryRow 
            difference={getTotalData(consumptionData).difference} 
            vesselName={vesselName} />
        </div>
      </div>
    </div>
  );
};

export { BunkerConsumptionCalculations };