/* eslint-disable no-negated-condition */
import { columns } from './config';
import { MAX_LEASING_PERIOD } from '@/constants/values';
import { useStore } from '@/stores/hooks';
import { toJS } from 'mobx';
import { observer } from 'mobx-react-lite';
import { Table } from 'ui/elements';

const PaymentsTable = observer(() => {
  const { $process, $results } = useStore();

  const unlimited = $process.has('Unlimited');
  const dataSource = toJS($results.payments);

  const dataColumns = !unlimited ? columns.filter((x) => !x.key.includes('_')) : columns;

  return (
    <Table
      columns={dataColumns}
      dataSource={dataSource}
      size="small"
      pagination={{
        defaultPageSize: MAX_LEASING_PERIOD,
        hideOnSinglePage: true,
        responsive: true,
        // showLessItems: true,
        showSizeChanger: false,
      }}
      scroll={{
        x: dataColumns.length > 5 ? 1000 : undefined,
        y: dataSource.length > 16 ? 630 : undefined,
      }}
    />
  );
});

export default {
  Component: PaymentsTable,
  id: 'payments-table',
  title: 'Таблица платежей',
};