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 {
  createPaymentDetailsLoadingSelector, selectPaymentDetailsBalanceModalState,
  selectPaymentDetailsDate,
} from 'app/modules/vesselDetails/paymentDetails/store/paymentDetails.selectors';
import { paymentDetailsCloseModal } from '../store/paymentDetails.actions';
import { PAYMENT_DETAILS } from '../store/paymentDetails.actionTypes';
import { Spinner } from 'app/shared/components/spinner/spinner';
import { ROUTER } from 'app/common/routes';
import { selectVesselName } from '../../root/store/vesselDetails.selectors';
import {
  getFinancialDataColumnsConfig,
  getModalHeader,
  getPerDayDataColumnsConfig,
  getTotalDataColumnsConfig, getYearsColumnsConfig,
} from './payment.config';
import { ModelDrivenDataTable } from 'app/shared/modules/tables/dataTable/modelDrivenDataTable';
import {
  selectBalanceModalOverviewData,
  selectBalanceModalPaymentBreakdownData,
  selectBalanceModalPreviousBunkerAdjustmentData,
  selectBalanceModalPreviousBunkerAdjustmentYears,
  selectBalanceModalVesselOverviewData, selectPreviousBunkerAdjustmentSummary,
} from '../store/paymentTables.selectors';

const PaymentDetailsBalanceModal = () => {
  const vesselName = useSelector(selectVesselName) ?? '';
  const paymentDate = useSelector(selectPaymentDetailsDate);
  const isOpened = useSelector(selectPaymentDetailsBalanceModalState);
  const poolName = useSelector(selectCurrentPoolName(ROUTER.lookup(location.pathname).options.pool));
  const overviewData = useSelector(selectBalanceModalOverviewData);
  const vesselData = useSelector(selectBalanceModalVesselOverviewData);
  const breakdownData = useSelector(selectBalanceModalPaymentBreakdownData);
  const previousBunkerAdjustmentData = useSelector(selectBalanceModalPreviousBunkerAdjustmentData);
  const previousBunkerAdjustmentYears = useSelector(selectBalanceModalPreviousBunkerAdjustmentYears);
  const previousBunkerAdjustmentSummary = useSelector(selectPreviousBunkerAdjustmentSummary);
  const balanceDetailsFetchCollectionSelector = [ PAYMENT_DETAILS.FETCH_PAYMENT_DETAILS_DATA_SELECTOR ];
  const loadingStatus = useSelector(createPaymentDetailsLoadingSelector(balanceDetailsFetchCollectionSelector));

  const dispatch = useDispatch();

  const formattedPaymentDate = paymentDate ? datePipe.formatLongMonthWithYear(paymentDate) : '';

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

  return (
    <Modal
      centered
      isOpened={isOpened}
      onOverlay={onCloseHandler}
      onClose={onCloseHandler}
      header={getModalHeader('Payment Details', null, vesselName, poolName)}
      extraClass={'c-payment-details-modal'}
      contentExtraClass={'c-payment-details-modal__content u-align--left'}
    >
      <div className="c-payment-details-modal__content">
        {loadingStatus ? <Spinner /> : <div className="o-layout__item-12 u-position-relative">
          <div className="o-gutter-bottom--small">
            <div className="u-margin-left">
              <h2 className="c-payment-details-modal__text c-payment-details-modal__text--table-title u-margin-top">
                Pool overview
              </h2>
              <h4 className="c-payment-details-modal__text c-payment-details-modal__text--table-sub-title u-margin-top--small">
                RESULT {formattedPaymentDate}
              </h4>
            </div>
            <div className="c-payment-details-modal__table--small">
              <ModelDrivenDataTable
                config={getPerDayDataColumnsConfig()}
                data={overviewData}
                columnHeaders={[]}
                isSortable={false}
              />
            </div>
            <p className="c-payment-details-modal__text c-payment-details-modal__text--info">
              * Average Pool pay out excluding compensation
            </p>
          </div>
          <div className="o-gutter-bottom--small u-margin-top--enormous">
            <div className="u-margin-left">
              <h2 className="c-payment-details-modal__text c-payment-details-modal__text--table-title u-margin-top">
                Vessel overview
              </h2>
              <h4 className="c-payment-details-modal__text c-payment-details-modal__text--table-sub-title u-margin-top--small">
                VESSEL RESULT {formattedPaymentDate}
              </h4>
            </div>
            <div className="c-payment-details-modal__table">
              <ModelDrivenDataTable
                config={getFinancialDataColumnsConfig()}
                data={vesselData}
                columnHeaders={[]}
                isSortable={false}
              />
            </div>
          </div>
          <div className="o-gutter-bottom--small u-margin-top--enormous">
            <div className="u-margin-left">
              <h2 className="c-payment-details-modal__text c-payment-details-modal__text--table-title u-margin-top">
                Payment breakdown
              </h2>
            </div>
            <div className="c-payment-details-modal__table">
              <ModelDrivenDataTable
                config={getTotalDataColumnsConfig()}
                data={breakdownData}
                columnHeaders={[]}
                isSortable={false}
              />
            </div>
          </div>
          <div className="o-gutter-bottom--small u-margin-top--enormous">
            <div className="u-margin-left">
              <h2 className="c-payment-details-modal__text c-payment-details-modal__text--table-title u-margin-top">
                Previous Periods Adjustments - Pool earnings
              </h2>
            </div>
            <div className="c-payment-details-modal__table--big">
              <ModelDrivenDataTable
                config={getYearsColumnsConfig(previousBunkerAdjustmentYears)}
                data={previousBunkerAdjustmentData}
                columnHeaders={[]}
                summary={previousBunkerAdjustmentSummary}
                isSortable={false}
              />
            </div>
          </div>
        </div>}
      </div>
    </Modal>
  );
};

export { PaymentDetailsBalanceModal };