import React from 'react';
import intl from 'react-intl-universal';

import { DataTable, FinancialSheet } from 'components';

import { useVendorsBalanceColumns } from './components';
import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';

/**
 * Vendors balance summary table.
 */
export default function VendorsBalanceSummaryTable({
  //#ownProps
  organizationName,
}) {
  const {
    VendorBalanceSummary: { table },
    isVendorsBalanceLoading,
  } = useVendorsBalanceSummaryContext();

  // vendors balance summary columns.
  const columns = useVendorsBalanceColumns();

  const rowClassNames = (row) => {
    return [`row-type--${row.original.row_types}`];
  };

  return (
    <FinancialSheet
      companyName={organizationName}
      name={'vendors-balance-summary'}
      sheetType={intl.get('vendors_balance_summary')}
      asDate={new Date()}
      loading={isVendorsBalanceLoading}
    >
      <DataTable
        className={'bigcapital-datatable--financial-report'}
        columns={columns}
        data={table?.data}
        rowClassNames={rowClassNames}
        noInitialFetch={true}
      />
    </FinancialSheet>
  );
}