import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import moment from "moment"
import { DailyLog_Enums, MettaSvr_Common } from "../../../../redux/helpers/action-enums"
import doctorImg  from "./assets/doctor.png"
import educatorImg  from "./assets/educator.png"
import  patientImg  from "./assets/patient.png"

                /*
                UserIcon: when individual message during chat gets its icon set
                ProfilePicUrl: during chat history, as UserIcon is not set. As setting it will lead to unnecessary iteration in reducer
                */
const cellFormatter = ({FormattedTimeString, CreatedOn, Message, UserType, ImageUrl, ProfilePicUrl, 
    UserName, UserIcon, MessageType,
    imageTap=()=>{}
}) => (

    MessageType === DailyLog_Enums.ChatMessageTypeEnum.System ?
    <div className="system-message-background mt-1 ml-5">
        <div className="system-engraved-text">
            { Message }
        </div>
    </div> : 
    MessageType === DailyLog_Enums.ChatMessageTypeEnum.Error ?
    <div className="system-message-background mt-1 ml-5">
        <div className="system-engraved-text error-state">
        </div>
    </div>  :
    <div className="timeline-box">
        <div className="usericon">
            {
                !!UserIcon ? <img src={ UserIcon } />: 
                !!ProfilePicUrl ? <img src={ ProfilePicUrl } />: 
                UserType === MettaSvr_Common.UserTypeEnum.Doctor ? <img src={ doctorImg }/> :
                UserType === MettaSvr_Common.UserTypeEnum.Educator ? <img src= {educatorImg }/> :
                UserType === MettaSvr_Common.UserTypeEnum.Patients ? <img src={ patientImg }/> :
                    <FontAwesomeIcon icon={"user-circle"} size="2x"/>
            }
        </div>
        {
            MessageType === DailyLog_Enums.ChatMessageTypeEnum.Image ?
            (
                <div className="d-flex justify-content-between p-2 image-content-wrapper">
                    <div className="username-title">{ UserName }</div>

                    <div className="timeline-body-img" onClick={e => imageTap(ImageUrl)}>
                        <img src={ImageUrl}/>
                    </div>                
                </div>
            ) : 
            (
                <div className="timeline-item">
                    <span className="time">
                        <i className="icon-clock"></i> 
                        &nbsp;&nbsp;{ !!CreatedOn ?  moment(CreatedOn).format('MMM Do YYYY, h:mm:ss a')
                        :FormattedTimeString }
                    </span>
                    <div className="timeline-body">
                        <span className="username-title">{ UserName }</span>
                        <br/>
                        { Message }
                    </div>
                </div>
            )
        }
    </div>
)
export { cellFormatter }