import React from 'react';
import { Modal } from 'app/shared/components/modal/modal';
import datePipe from 'app/shared/pipes/date.pipe';
import { selectCurrentPoolName } from 'app/shared/services/filters/filters.service';
import { useDispatch, useSelector } from 'react-redux';
import { ModelDrivenDataTable } from 'app/shared/modules/tables/dataTable/modelDrivenDataTable';
import { ColumnConfig } from 'app/shared/modules/tables/dataTable/dataTable.types';
import { selectVesselName } from '../../root/store/vesselDetails.selectors';
import { ROUTER } from 'app/common/routes';
import { Spinner } from 'app/shared/components/spinner/spinner';
import {
  createTceDevelopmentIsLoadingSelector,
  selectTceDevelopmentCommonData,
  selectTceDevelopmentModalData,
  selectTceDevelopmentModalState,
} from '../store/tceDevelopment.selectors';
import { TCE_DEVELOPMENT } from '../store/tceDevelopment.actionTypes';
import { tceDevelopmentCloseModal } from '../store/tceDevelopment.actions';
import { TceDevelopmentButtonDownloadXLS } from './tceDevelopmentButtonDownloadXLS';
import { PrintButton } from 'app/shared/containers/print/printButton';
import * as Text from 'app/shared/components/text/text';

export interface TceDevelopmentRowData {
  period: string;
  scrubber: boolean;
  poolPoints: number;
  bunkerAdjustmentPerDay: number;
  poolPointsEarnings: number;
  bunkerAdjustment: number;
  scrubberBonus: number;
  waf: number;
  specialCompensation: number;
  tce: number;
  totalAdjustmentToDate: number;
  previousPeriodImpact: number;
  monthlyAdjustment: number
}

const getColumnsConfig = (): ColumnConfig<TceDevelopmentRowData>[] => [
  {
    columnName: 'PERIOD',
    getValue: (item) => item.period,
    align: 'left',
    cellType: 'date',
    width: 5,
  },
  {
    columnName: 'PP EARNINGS',
    getValue: (item) => item.poolPointsEarnings,
    align: 'right',
    cellType: 'number',
    width: 7,
  },
  {
    columnName: 'BUNKER ADJUSTMENT',
    getValue: (item) => item.bunkerAdjustment,
    align: 'right',
    cellType: 'number',
    width: 12,
  },
  {
    columnName: 'SCRUBBER BONUS',
    getValue: (item) => item.scrubberBonus,
    align: 'right',
    cellType: 'number',
    width: 10,
  },
  {
    columnName: 'WAF, DTA & CBP COMPENSATION',
    getValue: (item) => item.waf,
    align: 'right',
    cellType: 'number',
    width: 14,
  },
  {
    columnName: 'SPECIAL COMPENSATION',
    getValue: (item) => item.specialCompensation,
    align: 'right',
    cellType: 'number',
    width: 11,
  },
  {
    columnName: 'PAY OUT',
    getValue: (item) => item.tce,
    align: 'right',
    cellType: 'number',
    width: 5,
  },
  {
    columnName: 'Monthly Earnings adjustment',
    getValue: (item) => item.monthlyAdjustment,
    align: 'right',
    cellType: 'number',
    width: 14,
  },
  {
    columnName: 'Period to date adjustment',
    getValue: (item) => item.totalAdjustmentToDate,
    align: 'right',
    cellType: 'number',
    width: 11,
  },
  {
    columnName: 'Prior Periods adjustment impact on pay out',
    getValue: (item) => item.previousPeriodImpact,
    align: 'right',
    cellType: 'number',
    width: 11,
  },
];

const TceDevelopmentModal = () => {
  const vesselName = useSelector(selectVesselName) ?? '';
  const poolName = useSelector(selectCurrentPoolName(ROUTER.lookup(location.pathname).options.pool));
  const tceDevelopmentDate = useSelector(selectTceDevelopmentCommonData).date;
  const isOpened = useSelector(selectTceDevelopmentModalState);
  const data = useSelector(selectTceDevelopmentModalData);
  const tceDevelopmentFetchCollectionSelector = [ TCE_DEVELOPMENT.FETCH_TCE_DEVELOPMENT_DATA_SELECTOR ];
  const loadingStatus = useSelector(createTceDevelopmentIsLoadingSelector(tceDevelopmentFetchCollectionSelector));

  const dispatch = useDispatch();

  const formattedTceDevelopmentDate = tceDevelopmentDate ? datePipe.formatLongMonthWithYear(tceDevelopmentDate) : '';

  const onCloseHandler = () => {
    dispatch(tceDevelopmentCloseModal());
  };

  const getModalHeader = () => <div className="c-tce-development-modal__header">
    <h3 className="c-tce-development-modal__text c-tce-development-modal__text--title u-margin-top">
      {`Monthly earnings development for ${formattedTceDevelopmentDate}`}
    </h3>
    <div className="o-layout u-margin-top u-margin-bottom u-align-items-center">
      <h1 className="c-tce-development-modal__text c-tce-development-modal__text--vessel-name o-layout__item-10">
        {vesselName}
      </h1>
      <div className="o-layout o-layout__item--auto u-align-items-center u-hide--lg-flex">
        <PrintButton />
        <span className='o-layout u-margin-left--enormous'>
          <TceDevelopmentButtonDownloadXLS />
        </span>
      </div>
      <div className="c-tce-development-modal__download o-layout__item-2" />
    </div>
    <h5 className="c-tce-development-modal__text c-tce-development-modal__text--pool-name u-margin-top--small">
      {poolName} pool
    </h5>
  </div>;

  return (
    <Modal
      centered
      isOpened={isOpened}
      onOverlay={onCloseHandler}
      onClose={onCloseHandler}
      header={getModalHeader()}
      extraClass={'c-tce-development-modal'}
      contentExtraClass={'u-align--left'}
    >
      <div className="c-tce-development-modal__content">
        {loadingStatus ? <Spinner /> : <div className="o-layout__item-12 u-position-relative">
          <div className="c-tce-development-modal__info-container">
            <Text.Paragraph size='small'>
              Below table presents the development of the pay out over time. The earnings fluctuations are a result of the changes in the voyage estimates.
            </Text.Paragraph>
            <Text.Paragraph size='small'>
              The monthly changes to the initial earnings are represented by the prior period adjustments, which are also impacting monthly distribution.
            </Text.Paragraph>
            <Text.Paragraph size='small'>
              All special compensations impact on earnings remains unchanged.
            </Text.Paragraph>
          </div>
          <div className="u-margin-top--medium">
            <ModelDrivenDataTable
              config={getColumnsConfig()}
              data={data}
              columnHeaders={[]}
            />
          </div>
        </div>}
      </div>
    </Modal>
  );
};

export { TceDevelopmentModal };