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

import {hasPermission} from "../../helpers/userPermissions";


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

const ListDriver_compliances = ({ driver_compliances, loading, onDelete, currentPage, numPages, onPageChange }: Props) => {
    
    const currentUser = useAppSelector((state) => state.auth.currentUser);
    const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_DRIVER_COMPLIANCES')
    
    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 && driver_compliances.map((item) => (
                  <div key={item.id}>
                    <CardBox hasTable isList className={'rounded shadow-none'}>
                        <div className={`flex rounded  dark:bg-dark-900  border  border-stone-300  items-center overflow-hidden`}>
                          
                          <Link
                              href={`/driver_compliances/driver_compliances-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 '}>DriverProfile</p>
                                <p className={'line-clamp-2'}>{ dataFormatter.driver_profilesOneListFormatter(item.driver_profile) }</p>
                            </div>
                          

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                          
                          </Link>
                            <ListActionsPopover
                              onDelete={onDelete}
                              itemId={item.id}
                              pathEdit={`/driver_compliances/driver_compliances-edit/?id=${item.id}`}
                              pathView={`/driver_compliances/driver_compliances-view/?id=${item.id}`}
                              
                              hasUpdatePermission={hasUpdatePermission}
                              
                            />
                        </div>
                    </CardBox>
                  </div>
                ))}
                {!loading && driver_compliances.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 ListDriver_compliances