import React from 'react'
import { useQuery } from "@tanstack/react-query";
import {Link} from 'react-router-dom'

import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
import TableWrapper from '../tableWrapper/TableWrapper'
import Icons from '../Icons'

import Avatar from '../../assets/user_avatar.jpg'
import queryKeys from '../../services/queryKeys'
import { applyLoan } from '../../services/siteServices'

export default function SelectLoanCom() {

    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.apply_loan,
        queryFn: () => applyLoan()
    })

    console.log('data', data?.data)
    // const selectLoanUsers = data?.data?.demo_data?.list // APPLY LOAN LIST

    return (
        <div className='w-full'>
            <BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
            <p className='py-4'>
            coming soon ...
            </p>
            {isFetching ? 
              <>
                  <div className="w-full py-4">
                    <p className='text-slate-800'>Loading...</p>
                  </div>
              </>
              : isError ?
                <div className="w-full py-4">
                    <p className='text-red-500'>{error.message}</p>
                </div>
              :
                <TableWrapper data={dummy} itemsPerPage={7}>
                {({ data }) => (
                    <>
                        <table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                                <tr>
                                    <th scope="col" className="p-3">
                                        <div className="flex items-center">
                                            <input id="checkbox-all-search" type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
                                            <label htmlFor="checkbox-all-search" className="sr-only">checkbox</label>
                                        </div>
                                    </th>
                                    <th scope="col" className="px-4 py-2">
                                        Name
                                    </th>
                                    <th scope="col" className="px-4 py-2">
                                        To
                                    </th>
                                    <th scope="col" className="px-4 py-2">
                                        From
                                    </th>
                                    <th scope="col" className="px-4 py-2">
                                        Ticket Number
                                    </th>
                                    <th scope="col" className="px-4 py-2">
                                        Action
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {(data && data.length > 0) ? data?.map((item, index) => (
                                    <tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                        <td className="w-3 p-3">
                                            <div className="flex items-center">
                                                <input id="checkbox-table-search-1" type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
                                                <label htmlFor="checkbox-table-search-1" className="sr-only">checkbox</label>
                                            </div>
                                        </td>
                                        <th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
                                            <img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
                                            <div className="px-3">
                                                <div className="text-base font-semibold">{item?.name || ''}</div>
                                                <div className="font-normal text-gray-500">{!item?.email || 'neil.sims@flowbite12345.com'}</div>
                                            </div>  
                                        </th>
                                        <td className="px-3 py-2">
                                            {item?.to || ''}
                                        </td>
                                        <td className="px-3 py-2">
                                            <div className="flex items-center">
                                            {item?.from || ''}
                                            </div>
                                        </td>
                                        <td className="px-3 py-2">
                                            <div className="flex items-center">
                                            {item?.ticket || ''}
                                            </div>
                                        </td>
                                        <td className="px-3 py-2 flex gap-2">
                                            {/* <!-- Modal toggle --> */}
                                            {/* <Link to={RouteLinks.manageAdminPage}>
                                                <i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
                                            </Link> */}
                                            {/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
                                            {/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
                                            <span className='text-red-500 text-xl'>
                                                <Icons name='trash' />
                                            </span>
                                        </td>
                                    </tr>
                                ))
                                :
                                <tr className="w-3 p-3">
                                    <td className="px-3 py-2" colSpan={6}>
                                        <div className="flex justify-center items-center">
                                            No Record Found
                                        </div>
                                    </td>
                                </tr>
                                }
                            </tbody>
                        </table>
                    </>
                )}
                </TableWrapper>
            }
        </div>
    )
}


const dummy = [
    {name:'ok'}
]