import { FC } from 'react'
import {KTIcon, toAbsoluteUrl} from '../../../helpers'
import { DashDataProps, RecentApplicationsProps } from '../../../../app/pages/dashboard/model'
import { NewDateTimeFormatter } from '../../../lib/NewDateTimeFormatter'
import RecentLoanAppList from '../../../layout/components/paginatedListing/RecentLoanAppList'


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 pt-5'>
        <h3 className='card-title align-items-start flex-column'>
          <span className='card-label fw-bold fs-3 mb-1'>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 ?
      <RecentLoanAppList
        data={dashData?.data?.recent_applications}
        itemsPerPage={5}
      >
        {(data:RecentApplicationsProps)=>(
          <>
            <div className='card-body py-3'>
              {/* 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</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>
                    {data && data.length ?
                      data.map(item => (
                      <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/300-14.jpg')} alt='' />
                            </div>
                            <div className='d-flex justify-content-start flex-column'>
                              <a href='#' className='text-gray-900 fw-bold text-hover-primary fs-6'>
                                {item?.firstname} {item?.lastname}
                              </a>
                              <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 text-hover-primary d-block fs-6'>
                            {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 */}
              </div>
              {/* end::Table container */}
            </div>
          </>
        )}
      </RecentLoanAppList>
      :
      null
      }
      {/* begin::Body */}

    </div>
  )
}

export {TablesWidget10}