import React from 'react';
import CardBox from '../CardBox';
import dataFormatter from '../../helpers/dataFormatter';
import ListActionsPopover from "../ListActionsPopover";
import {useAppSelector} from "../../stores/hooks";
import {Pagination} from "../Pagination";
import LoadingSpinner from "../LoadingSpinner";
import Link from 'next/link';

type Props = {
    loans: any[];
    loading: boolean;
    onDelete: (id: string) => void;
    currentPage: number;
    numPages: number;
    onPageChange: (page: number) => void;
};

const ListLoans = ({ loans, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
    const corners = useAppSelector((state) => state.style.corners);
    const bgColor = useAppSelector((state) => state.style.cardsColor);

    return (
        <>
            <div className='relative overflow-x-auto p-4 space-y-4'>
                {loading && <LoadingSpinner />}
                {!loading && loans.map((item) => (
                  <div key={item.id}>
                    <CardBox hasTable isList className={'rounded shadow-none'}>
                        <div className={`flex rounded dark:bg-dark-900 border items-center overflow-hidden`}>
                          <Link
                              href={`/loans/loans-view/?id=${item.id}`}
                              className={
                                  'flex-1 px-4 py-6 h-24 flex divide-x-2 divide-stone-300 items-center overflow-hidden dark:divide-dark-700 overflow-x-auto'
                              }
                          >

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>Code</p>
                                <p className={'line-clamp-2'}>{ item.code }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>PrincipalAmount</p>
                                <p className={'line-clamp-2'}>{ item.principal_amount }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>Term</p>
                                <p className={'line-clamp-2'}>{ item.term }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>PendingAmount</p>
                                <p className={'line-clamp-2'}>{ item.pending_amount }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>LastPendingAmount</p>
                                <p className={'line-clamp-2'}>{ item.last_pending_amount }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>Rate</p>
                                <p className={'line-clamp-2'}>{ item.rate }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>CommissionRate</p>
                                <p className={'line-clamp-2'}>{ item.commission_rate }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>RegistrationDate</p>
                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.registration_date) }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>StartedPaymentDate</p>
                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.started_payment_date) }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>LastPaymentDate</p>
                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.last_payment_date) }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>FinishPaymentDate</p>
                                <p className={'line-clamp-2'}>{ dataFormatter.dateTimeFormatter(item.finish_payment_date) }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>FinishDiscount</p>
                                <p className={'line-clamp-2'}>{ item.finish_discount }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>FinishDiscountAmount</p>
                                <p className={'line-clamp-2'}>{ item.finish_discount_amount }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>AdminRate</p>
                                <p className={'line-clamp-2'}>{ item.admin_rate }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>AdminAmount</p>
                                <p className={'line-clamp-2'}>{ item.admin_amount }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>Purpose</p>
                                <p className={'line-clamp-2'}>{ item.purpose }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>Status</p>
                                <p className={'line-clamp-2'}>{ dataFormatter.loan_statusOneListFormatter(item.status) }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>Client</p>
                                <p className={'line-clamp-2'}>{ dataFormatter.clientsOneListFormatter(item.client) }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>Staff</p>
                                <p className={'line-clamp-2'}>{ dataFormatter.staffsOneListFormatter(item.staff) }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>InterestRate</p>
                                <p className={'line-clamp-2'}>{ dataFormatter.interest_ratesOneListFormatter(item.interest_rate) }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>Branch</p>
                                <p className={'line-clamp-2'}>{ dataFormatter.branchesOneListFormatter(item.branch) }</p>
                            </div>

                            <div className={'flex-1 px-3'}>
                                <p className={'text-xs text-gray-500'}>LoanType</p>
                                <p className={'line-clamp-2'}>{ dataFormatter.loan_typesOneListFormatter(item.loan_type) }</p>
                            </div>

                          </Link>
                            <ListActionsPopover
                              onDelete={onDelete}
                              itemId={item.id}
                              pathEdit={`/loans/loans-edit/?id=${item.id}`}
                              pathView={`/loans/loans-view/?id=${item.id}`}
                              hasUpdatePermission={true}
                            />
                        </div>
                    </CardBox>
                  </div>
                ))}
                {!loading && loans.length === 0 && (
                  <div className='col-span-full flex items-center justify-center h-40'>
                      <p className=''>No data to display</p>
                  </div>
                )}
            </div>
            <div className={'flex items-center justify-center my-6'}>
                <Pagination
                  currentPage={currentPage}
                  numPages={numPages}
                  setCurrentPage={onPageChange}
                />
            </div>
        </>
    )
};

export default ListLoans
