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

import { CiPhone } from "react-icons/ci"
import { CiBank } from "react-icons/ci";
import { MdOutlineEmail } from "react-icons/md"
import { FaMapPin } from "react-icons/fa";

import { demoUsersList } from "../services/siteServices"
import queryKeys from "../services/queryKeys"
import myLinks from "../myLinks";
import TableWrapper from "./TableWrapper";

export default function HomeCom() {

  const navigate = useNavigate()

  const {data:users, isFetching, isError, error} = useQuery({
      queryKey: queryKeys.demoUsers,
      queryFn: () => demoUsersList()
  })

  const demoUsers = users?.data?.demo_data?.list // LOAN USERS LIST

  const getLoanPage = (user) => {
    navigate(myLinks.getLoan, {state:{user}})
  }

  return (

      <div className="w-full flex flex-col gap-2 text-black">
        <div className="py-3 text-3xl text-black font-bold">Users</div>
        {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={demoUsers} itemsPerPage={16}>
              {({ data }) => (
              <div className="grid gap-5 sm:gap-[40px] grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                {data.map((user, index) => {
                let hasSalaryAcct = user.salary_account === 0 ? false : true                  
                return (
                    <div onClick={()=>getLoanPage(user)} key={user?.uid || index} className={`${hasSalaryAcct ? 'bg-white' : 'bg-red-50'} w-full rounded p-3 sm:p-5 shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer`}>
                      <div className="mb-5 card-title w-full md:w-4/5 mx-auto text-center">
                        <h1 className="mb-[1px] text-base md:text-xl lg:text-2xl font-bold">{user.name}</h1>
                        <span className={`text-sm font-bold p-1 rounded`}>BVN: {user.bvn}</span>
                      </div>
                      <div className="card-body flex flex-col gap-2">
                        <div className="contact text-slate-700 flex gap-2 items-center">
                          <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                            <CiBank />
                          </span>
                          <span>{user.bvn}</span>
                        </div>
                        <div className="contact text-slate-700 flex gap-3 items-center">
                          <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                            <CiPhone />
                          </span>
                          <span>{user.mobile}</span>
                        </div>
                        <div className="contact text-slate-700 flex gap-3 items-center">
                          <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                            <MdOutlineEmail />
                          </span>
                          <span className="break-words">{user.email}</span>
                        </div>
                        <div className="contact text-slate-700 flex gap-3 items-center">
                          <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                            <FaMapPin />
                          </span>
                          <span>{user.pin}</span>
                        </div>
                      </div>
                    </div>
                  )
                })}

              </div>
              )}
              </TableWrapper>
        }
      </div>

  )
}





// const data = [
//   {name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
//   {name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
//   {name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
//   {name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
//   {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
//   {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},

//   {name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
//   {name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
//   {name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
//   {name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
//   {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
//   {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},

//   {name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
//   {name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
//   {name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
//   {name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
//   {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
//   {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},

// ]