import React, { useState } from "react";
import dataImage1 from "../../assets/images/data-table-user-1.png";
import dataImage2 from "../../assets/images/data-table-user-2.png";
import dataImage3 from "../../assets/images/data-table-user-3.png";
import dataImage4 from "../../assets/images/data-table-user-4.png";
import SelectBox from "../Helpers/SelectBox";

import PaginatedList from "../Pagination/PaginatedList";
import { handlePagingFunc } from "../Pagination/HandlePagination";

export default function ActiveJobMessage({ activeJobMesList }) {
    const [currentPage, setCurrentPage] = useState(0);
    const indexOfFirstItem = Number(currentPage);
    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
    const currentActiveJobMesList = activeJobMesList?.data?.slice(indexOfFirstItem, indexOfLastItem);
  
    const handlePagination = (e) => {
      handlePagingFunc(e,setCurrentPage)
    }

  return (
    <div className='flex flex-col justify-between h-full'>
    <table className="wallet-activity w-full table-auto border-collapse text-left">
        <thead className='border-b-2'>
            <tr className='text-slate-600'>
            <th className="p-2"></th>
            </tr>
        </thead>
        {activeJobMesList.data.length ?
        (
        <tbody>
            {currentActiveJobMesList.map((item, index) => (
            <tr key={index} className='text-slate-500'>
                <td>
                    <div className="msg_box">
                        <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
                        <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
                    </div>

                </td>
            </tr>
            ))}
        </tbody>
        )
        :
        activeJobMesList.error ? 
        (
        <tbody>
            <tr className='text-slate-500'>
                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
            </tr>
        </tbody>
        )
        :
        <tbody>
            <tr className='text-slate-500'>
                <td className="p-2" colSpan={4}>No Message Found!</td>
            </tr>
        </tbody>
        }
    </table>

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