import ReactTimeAgo from 'react-time-ago'
import TimeAgo from 'javascript-time-ago'
import ru from 'javascript-time-ago/locale/ru.json'

TimeAgo.addLocale(ru)
let handler = (e) => {

    console.log(e)
    e.preventDefault()
}

export const Message = ({ nick, msg, date, media, modified, own = false, replies }) => {

    return (
        <li className={own ? "msg-user" : "msg-someone"} onContextMenu={(e) => handler(e)}>
            {media && media.length && <div>
                <span>Прикрепленные файлы</span>
                {media.map(file => <a href={"/" + file.url}>{file}</a>)}
            </div>}
            <span className="msg-nick">{nick}</span>
            <span className="msg-text">{msg}</span>
            <ReactTimeAgo className="msg-date" date={+date} locale="ru" timeStyle="round" />
            {modified && <span className="mutated-msg">Сообщение изменено</span>}
            {replies && replies.map(repMSG => <Message nick={repMSG.login} msg={repMSG.text} date={repMSG.createdAt} />)}
            {media && media.length && media.map(file => {
                file.type.includes("audio") &&
                    <audio controls>
                        <source src={"/" + file.url} type={file.type} />
                    </audio>

                file.type.includes("image") &&
                    <img src={"/" + file.url} alt={file.originalFileName} />

                file.type.includes("video") &&
                    <video>
                        <source src={"/" + file.url} type={file.type} />
                    </video>
            })}
        </li>
    )
}