import React from 'react';
import { useDispatch } from 'react-redux';
import { exportTableXlsxAction } from 'app/modules/exportToXls/store/exportXlsx.actions';
import { ButtonDownloadProps } from './buttonDownloadXLS.types';
import { CustomHtmlTitle } from '../../../../shared/components/customHtmlTitle/customHtmlTitle';


const ButtonDownloadXLS = <T, >({ columnsConfig, rowsData, excelFileName, excelFileSuffix, extraClass='' }: ButtonDownloadProps<T>) => {
  const dispatch = useDispatch();
  const payload = {
    rows: rowsData,
    columnsStyle: columnsConfig,
    fileName: excelFileName,
    excelFileSuffix: excelFileSuffix,
  };

  return (
    <div className={`o-layout o-layout__item u-justify-content-end u-align-items-center u-display--none u-display-md--flex ${extraClass}`}>
      <CustomHtmlTitle text="Download XLS" position='responsive-top'>
        <i className='icon-download-2 u-cursor--pointer o-layout' onClick={() => dispatch(exportTableXlsxAction(payload))} />
      </CustomHtmlTitle>
    </div>
  );
};

export { ButtonDownloadXLS };