import React from 'react';
import { ButtonDownloadXLS } from 'app/modules/exportToXls/components/buttonDownloadXLS/buttonDownloadXLS';
import { ButtonDownloadConfig } from 'app/modules/exportToXls/components/buttonDownloadXLS/buttonDownloadXLS.types';
import { COLUMN_NAMES } from '../poolPoints.constants';
import { useSelector } from 'react-redux';
import { selectPoolPointsXLSData } from '../store/poolPoints.selectors';
import { selectVesselDetailsGeneralInfo } from 'app/modules/vesselDetails/earnings/store/vesselDetailsEarnings.selectors';
import { PoolPointsRow } from '../store/poolPoints.types';

const columnsConfig: ButtonDownloadConfig<PoolPointsRow>[] = [
  {
    header: COLUMN_NAMES.FACTOR,
    key: 'factor',
    width: 20,
  },
  {
    header: COLUMN_NAMES.PARAMETER,
    key: 'parameter',
    width: 20,
  },
  {
    header: COLUMN_NAMES.POINT_RANGE,
    key: 'pointRange',
    width: 20,
  },
  {
    header: COLUMN_NAMES.POOL_POINTS,
    key: 'poolPoints',
    width: 25,
  },
];

export const DownloadPoolPointsXls = () => {
  const rowsData = useSelector(selectPoolPointsXLSData);
  const vessel = useSelector(selectVesselDetailsGeneralInfo);

  return <ButtonDownloadXLS
    columnsConfig={columnsConfig}
    rowsData={rowsData}
    excelFileSuffix={vessel.name}
    excelFileName={'pool-points-'}
  />;
};