import { ModelDrivenDataTable } from 'app/shared/modules/tables/dataTable/modelDrivenDataTable';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { selectPaymentsData } from '../store/paymentDetails.selectors';
import { PaymentDataState, PaymentType } from 'app/modules/vesselDetails/root/store/vesselDetails.types';
import { openPaymentTcHireModal, paymentDetailsOnAccountOpenModal, paymentDetailsOpenModal } from '../store/paymentDetails.actions';
import ReactGA from 'react-ga';
import { withRouter } from 'react-router';
import * as H from 'history';
import { ROUTER } from 'app/common/routes';
import { tableColumns } from '../payoutTable.constants';


interface Props {
  location: H.Location,
}

const analyticsCategory = 'Vessel Details';

const PayoutTableRaw = ({ location }: Props) => {
  const { pool, vesselCode, partnerAxCode } = ROUTER.lookup(location.pathname).options;
  const payments = useSelector(selectPaymentsData);
  const dispatch = useDispatch();

  const openModal = (item: PaymentDataState) => {
    switch (item.type) {
      case PaymentType.OnAccount:
        ReactGA.event({
          category: analyticsCategory,
          action: 'Pay out Tab - On Account Modal Opened',
          label: `date: ${item.date}, pool: ${pool}, vesselCode: ${vesselCode}, partnerAxCode: ${partnerAxCode}`,
        });
  
        dispatch(paymentDetailsOnAccountOpenModal({ pool: Number(pool), vesselCode, partnerAxCode, date: item.date }));
        break;
      case PaymentType.BalanceOfMonth:
        ReactGA.event({
          category: analyticsCategory,
          action: 'Pay out Tab - Balance of Month Modal Opened',
          label: `date: ${item.date}, period: ${item.period}, pool: ${pool}, vesselCode: ${vesselCode}, partnerAxCode: ${partnerAxCode}`,
        });
  
        dispatch(paymentDetailsOpenModal({ pool: Number(pool), vesselCode, partnerAxCode, date: item.date, period: item.period }));
        break;
      default:
        ReactGA.event({
          category: analyticsCategory,
          action: 'Pay out Tab - Balance of Month Modal Opened (TC Hire Statement)',
          label: `date: ${item.date}, period: ${item.period}, pool: ${pool}, vesselCode: ${vesselCode}, partnerAxCode: ${partnerAxCode}`,
        });
  
        dispatch(openPaymentTcHireModal({ pool: Number(pool), vesselCode, partnerAxCode, date: item.date, period: item.period }));
        break;
    }
  };

  return <ModelDrivenDataTable config={tableColumns} data={payments} isSortable onRowClick={openModal} />;
};

const PayoutTable = withRouter(PayoutTableRaw);

export { PayoutTable };