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'>
    <div className="w-full min-h-[450px] max-h-[450px] overflow-y-scroll">
        <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>
                {activeJobMesList.data.map((item, index) => (
                <tr key={index} className='text-slate-500'>
                    <td>
                        <div className={`msg_box ${item.who}`}>
                            <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
                            {item.msg_type == 'FILE' ?
                            <a href='' className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></a>
                            :
                            <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>
    </div>

    {/* 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>
  )
}
