/* 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 { $results, $process } = useStore();

  const unlimited = $process.has('Unlimited');

  return (
    <Table
      columns={!unlimited ? columns.filter((x) => !x.key.includes('_')) : columns}
      dataSource={toJS($results.payments)}
      size="small"
      pagination={{
        defaultPageSize: 12,
        pageSizeOptions: [12, MAX_LEASING_PERIOD],
        responsive: true,
      }}
      scroll={{
        x: true,
      }}
    />
  );
});

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