import { FC } from 'react'
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
import { DashDataProps } from '../../../../app/pages/dashboard/model'
import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
import { Link } from 'react-router-dom'
import { AmountTo2DP } from '../../../lib/AmountFormatter'

type Props = {
  className: string
  dashData?: DashDataProps
}

const TablesWidget10: FC<Props> = ({className, dashData}) => {
  return (
    <div className={`card ${className}`}>
      {/* begin::Header */}
      <div className='card-header border-0'>
      <h3 className='card-title fw-bold text-gray-900'>Recent Loan Application</h3>
        {/* <h3 className='card-title align-items-start flex-column'>
          <span className='card-label fw-bold fs-3'>Recent Loan Application</span>
          <span className='text-muted mt-1 fw-semibold fs-7'>Over 500 members</span>
        </h3> */}
        {/* <div
          className='card-toolbar'
          data-bs-toggle='tooltip'
          data-bs-placement='top'
          data-bs-trigger='hover'
          title='Click to add a user'
        >
          <a
            href='#'
            className='btn btn-sm btn-light-primary'
          >
            <KTIcon iconName='plus' className='fs-3' />
            New Member
          </a>
        </div> */}
      </div>
      {/* end::Header */}

      {/* begin::Body */}
      {dashData?.loading ?
      null
      : dashData?.data?.recent_applications ?
      <>
        <div className='card-body py-0'>
          {/* begin::Table container */}
          <div className='table-responsive'>
            {/* begin::Table */}
            <table className='table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4'>
              {/* begin::Table head */}
              <thead>
                <tr className='fw-bold text-muted'>
                  <th className='w-25px'>
                    <div className='form-check form-check-sm form-check-custom form-check-solid'>
                      <input
                        className='form-check-input'
                        type='checkbox'
                        value='1'
                        data-kt-check='true'
                        data-kt-check-target='.widget-9-check'
                      />
                    </div>
                  </th>
                  <th className='min-w-150px'>Authors</th>
                  <th className='min-w-140px'>Amount (NGN)</th>
                  <th className='min-w-120px'>Progress</th>
                  <th className='min-w-100px text-end'>Actions</th>
                </tr>
              </thead>
              {/* end::Table head */}
              {/* begin::Table body */}
              <tbody>
                {dashData?.data?.recent_applications && dashData?.data?.recent_applications.length ?
                  dashData?.data?.recent_applications.map((item, index:any) => {
                    if(index < 6){
                      return (
                        <tr key={item?.uid}>
                          <td>
                            <div className='form-check form-check-sm form-check-custom form-check-solid'>
                              <input className='form-check-input widget-9-check' type='checkbox' value='1' />
                            </div>
                          </td>
                          <td>
                            <div className='d-flex align-items-center'>
                              <div className='symbol symbol-45px me-5'>
                                <img src={toAbsoluteUrl('media/avatars/avatar1.jpg')} alt='' />
                              </div>
                              <div className='d-flex justify-content-start flex-column'>
                                <span className='text-gray-900 fw-bold fs-6'>
                                  {item?.firstname} {item?.lastname}
                                </span>
                                <span className='text-muted fw-semibold text-muted d-block fs-7'>
                                  {NewDateTimeFormatter(item?.added)}
                                </span>
                              </div>
                            </div>
                          </td>
                          <td>
                            <span className='text-gray-900 fw-bold d-block fs-6'>
                              {AmountTo2DP(item.loan_amount)}
                            </span>
                            <span className='text-muted fw-semibold text-muted d-block fs-7'>
                              {item?.sales_agent? `Agent: ${item?.sales_agent}` : ``}
                            </span>
                          </td>
                          <td className='text-end'>
                            <div className='d-flex flex-column w-100 me-2'>
                              <div className='d-flex flex-stack mb-2'>
                                <span className='text-muted me-2 fs-7 fw-semibold'>50%</span>
                              </div>
                              <div className='progress h-6px w-100'>
                                <div
                                  className='progress-bar bg-primary'
                                  role='progressbar'
                                  style={{width: '50%'}}
                                ></div>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div className='d-flex justify-content-end flex-shrink-0'>
                              <a
                                href='#'
                                className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
                              >
                                <KTIcon iconName='switch' className='fs-3' />
                              </a>
                              <a
                                href='#'
                                className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
                              >
                                <KTIcon iconName='pencil' className='fs-3' />
                              </a>
                              <a
                                href='#'
                                className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm'
                              >
                                <KTIcon iconName='trash' className='fs-3' />
                              </a>
                            </div>
                          </td>
                        </tr>
                      )
                    }
                })
                :
                <tr>
                  <td colSpan={5}>No data found!</td>
                </tr>
                }
              </tbody>
              {/* end::Table body */}
            </table>
            {/* end::Table */}
            <p className='py-1 w-100 text-center text-hover-primary'>
              <Link to='/loan/pages/process/started'>more applications</Link>
            </p>
          </div>
          {/* end::Table container */}
        </div>
      </>
      :
      null
      }
      {/* begin::Body */}

    </div>
  )
}

export {TablesWidget10}