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";

export default function ActiveJobMessageMedia({ activeJobMesList }) {
  return (
    <div className='flex flex-col justify-between'>
        <div className="w-full h-full min-h-[250px] max-h-[250px] overflow-y-auto">
            <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) => 
                    {
                        let imageLink = `${activeJobMesList?.image}${localStorage.getItem('session_token')}/contracts/${item.msg_uid}`
                        return (
                            <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={imageLink} target="_blank" 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>
    </div>
  )
}