import { Column } from 'react-table';
import { UserInfoCell } from './UserInfoCell';
import { PaymentMonthCell } from './UserLastLoginCell';
import { AgentCell } from './AgentCell';
import { UserActionsCell } from './UserActionsCell';
import { UserSelectionCell } from './UserSelectionCell';
import { UserCustomHeader } from './UserCustomHeader';
import { UserSelectionHeader } from './UserSelectionHeader';
import { User } from '../../../core/_models';
import { AddedCell } from './AddedCell';

const formatNumberWithCommas = (number: string): string => {
  return number.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

const usersColumns: ReadonlyArray<Column<User>> = [
  {
    Header: (props) => <UserSelectionHeader tableProps={props} />,
    id: 'selection',
    Cell: ({ ...props }) => (
      <UserSelectionCell id={props.data[props.row.index].uid} />
    ),
  },
  {
    Header: (props) => (
      <UserCustomHeader
        tableProps={props}
        title="Name"
        className="min-w-125px"
      />
    ),
    id: 'firstname',
    Cell: ({ ...props }) => <UserInfoCell user={props.data[props.row.index]} />,
  },
  {
    Header: (props) => (
      <UserCustomHeader
        tableProps={props}
        title="Amount"
        className="min-w-125px"
      />
    ),
    accessor: 'loan_amount',
    Cell: ({ row, data }) =>
      formatNumberWithCommas(data[row.index].loan_amount || '0'),
  },
  {
    Header: (props) => (
      <UserCustomHeader
        tableProps={props}
        title="Payment Terms"
        className="min-w-125px"
      />
    ),
    id: 'payment_month',
    Cell: ({ ...props }) => (
      <PaymentMonthCell
        payment_month={props.data[props.row.index].payment_month}
      />
    ),
  },
  {
    Header: (props) => (
      <UserCustomHeader
        tableProps={props}
        title="Agent"
        className="min-w-125px"
      />
    ),
    id: 'sales_agent',
    Cell: ({ ...props }) => (
      <AgentCell agent={props.data[props.row.index].sales_agent} />
    ),
  },
  {
    Header: (props) => (
      <UserCustomHeader
        tableProps={props}
        title="Added"
        className="min-w-125px"
      />
    ),
    id: 'added',
    Cell: ({ ...props }) => (
      <AddedCell added={props.data[props.row.index].added} />
    ),
  },
  {
    Header: (props) => (
      <UserCustomHeader
        tableProps={props}
        title="Actions"
        className="text-end min-w-100px"
      />
    ),
    id: 'actions',
    Cell: ({ ...props }) => (
      <UserActionsCell id={props.data[props.row.index].uid} />
    ),
  },
];

export { usersColumns };