import React, { useState, useEffect } from "react";
import transaction1 from "../../assets/images/recent-transation-1.png";
import transaction2 from "../../assets/images/recent-transation-2.png";
import transaction3 from "../../assets/images/recent-transation-3.png";

import LoadingSpinner from "../Spinners/LoadingSpinner";
import { handlePagingFunc } from "../Pagination/HandlePagination";
import PaginatedList from "../Pagination/PaginatedList";
import usersService from "../../services/UsersService";


export default function ParentWaitingTable() {
    // const transationFilterData = [
    //     {
    //         id: 1,
    //         name: "all",
    //         uniqueId: Math.random(),
    //     },
    //     {
    //         id: 2,
    //         name: "send",
    //         uniqueId: Math.random(),
    //     },
    //     {
    //         id: 3,
    //         name: "recent",
    //         uniqueId: Math.random(),
    //     },
    // ];
    // const [filterActive, setValue] = useState(transationFilterData[0].id);
    // const filterHander = (value) => {
    //     setValue(value);
    // };

    const apiCall = new usersService()

    let [familySuggestList, setFamilySuggestList] = useState({loading: true, data:[]})

    const [currentPage, setCurrentPage] = useState(0);
    const indexOfFirstItem = Number(currentPage);
    const indexOfLastItem =
        Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
    const currentList = familySuggestList?.data?.slice(indexOfFirstItem, indexOfLastItem);

    const handlePagination = (e) => {
        handlePagingFunc(e, setCurrentPage);
    };

    useEffect(()=>{
        apiCall.getFamilySuggestList().then(res => {
            setFamilySuggestList({loading: false, data:res.data?.result_list})
        }).catch(err => {
            setFamilySuggestList({loading: false, data:[]})
            console.log('ERROR==>Familysuggestlist', err)
        })
    },[])

    return (
        <div className="rounded-2xl bg-white dark:bg-dark-white flex flex-col justify-between">
            {/* heading */}
            {/* <div className="heading sm:flex justify-between items-center">
                <div>
                    <ul className="flex space-x-5 items-center">
                        {transationFilterData.map((value) => (
                            <li
                                onClick={() => filterHander(value.id)}
                                key={value.uniqueId}
                                className={`text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29]  border-transparent hover:border-purple uppercase ${
                                    filterActive === value.id ? "border-purple text-purple" : ""
                                }`}
                            >
                                {value.name}
                            </li>
                        ))}
                    </ul>
                </div>
            </div> */}

            {/* content */}
            <div className="content min-h-[400px]">
                {familySuggestList.loading ?
                    <div className="h-full flex justify-center items-center">
                        <LoadingSpinner size='16' color='sky-blue' />
                    </div>
                    :
                    familySuggestList && familySuggestList.length != 0?
                    <ul>
                        {currentList.map((item)=>{
                              //   Image
                                let Image = require(`../../assets/images/family/${
                                    item.banner || "default.jpg"
                                }`);
                            return (
                            <li key={item.uid} className="content-item py-2 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple">
                                <div className="w-full flex justify-between items-center">
                                    <div className="account-name flex space-x-4 items-center">
                                        <div className="icon w-14 h-14 flex justify-center items-center">
                                            <img src={Image} alt="" className="w-full h-full" />
                                        </div>
                                        <div className="">
                                            <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
                                                {item.title}
                                            </p>

                                            <p className="text-sm text-thin-light-gray font-medium">
                                                {item.description}
                                            </p>
                                        </div>
                                    </div>
                                    <div className="px-2 self-end">
                                        <p className="text-sm font-bold text-dark-gray dark:text-white">
                                            {new Date(item.added).toLocaleString().split(',')[0]}
                                            
                                        </p>
                                        <p className="text-xs py-1.5 w-[50px] tracking-wide rounded-full bg-gold text-white flex justify-center items-center">{item.status_text}</p>
                                    </div>
                                </div>
                            </li>
                            )
                        })}
                    </ul>
                    :
                    <p className="w-full flex items-center justify-center text-xl text-dark-gray dark:text-white">No List Found!</p>
                }
            </div>

            {/* PAGINATION BUTTON */}
            <PaginatedList
            onClick={handlePagination}
            prev={currentPage == 0 ? true : false}
            next={
            currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
            familySuggestList?.data?.length
                ? true
                : false
            }
            data={familySuggestList?.data}
            start={indexOfFirstItem}
            stop={indexOfLastItem}
            />
            {/* END OF PAGINATION BUTTON */}

        </div>
    );
}