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'
import { EmployerCell } from './EmployerCell'

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='Employer' className='min-w-125px' />
    ),
    id: 'employer_name',
    Cell: ({...props}) => <EmployerCell employer_name={props.data[props.row.index].employer_name} />,
  },
  {
    Header: (props) => <UserCustomHeader tableProps={props} title='Amount' className='min-w-125px' />,
    accessor: 'loan_amount',
  },
  {
    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}