/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React, {useState, useEffect} from 'react'
import styled from 'styled-components'
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Avatar from '@material-ui/core/Avatar';
import noAvatar from "../img/default_profile.png";
import {GetActivityProperties, Tag, Possible_Activities, ObjectColor} from './Activities/Definitions.js'
//icons
import FavoriteIcon from '@material-ui/icons/Favorite';
import CreateIcon from '@material-ui/icons/Create';
import GetAppIcon from '@material-ui/icons/GetApp';
import StarIcon from '@material-ui/icons/Star';
import SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';
import ReportIcon from '@material-ui/icons/Report';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import ThumbDownIcon from '@material-ui/icons/ThumbDown';
import DeleteIcon from '@material-ui/icons/Delete';

const GetObjectColor = (tag) => {
    return ObjectColor[tag]
}

const getNotificationIcon = (iconType) => {
    switch(iconType) {
        case 'create':
            return <CreateIcon className="icon"/>;
        case 'favorite':
            return <FavoriteIcon className="icon"/>;
        case 'get_app':
            return <GetAppIcon className="icon"/>;
        case 'star':
            return <StarIcon className="icon"/>;
        case 'report':
            return <ReportIcon className="icon"/>;
        case 'cloud_upload':
            return <CloudUploadIcon className="icon"/>;
        case 'delete':
            return <DeleteIcon className="icon"/>;
        case 'thumb_down':
            return <ThumbDownIcon className="icon"/>;
        default :
            return <SpeakerNotesIcon className="icon"/>;
    }
}

const getTimeDifference = (timestamp) => {
    //returns time difference between now and the moment the notification was created
    var moment = require('moment')

    const now = moment()
    const then = moment(timestamp, moment.ISO_8601)

    let duration = moment.duration(now.diff(then))
    {/*console.log('duration: ', duration)*/}
    let timeDiff;
    if (duration._data.years > 0)  {
        timeDiff = duration._data.years + (duration._data.years > 1 ? ' anos' : ' ano')
    }
    else if (duration._data.months > 0) {
        timeDiff = duration._data.months + (duration._data.months > 1? ' meses' : ' mês')
    }
    else if(duration._data.days > 0) {
        timeDiff = duration._data.days + (duration._data.days > 1 ? ' dias' : ' dia')
    }
    else if(duration._data.hours > 0) {
        timeDiff = duration._data.hours + (duration._data.hours > 1 ? ' horas' : ' hora')
    }
    else if(duration._data.minutes > 0) {
        timeDiff = duration._data.minutes + (duration._data.minutes > 1 ? ' minutos' : ' minuto')
    }

    return timeDiff;
}

export default function ActivityListItem (props) {
    const [activity, setActivity] = React.useState({
        tag : '',
        icon : '',
        text : '',
        text2 : '',
    })

    useEffect( () => {
        const newTag = Tag[(props.actionType === 'CuratorAssignment' ? props.actionType : props.objectType)]
        const {icon, text, text2 } = GetActivityProperties(props.activity)
        {/*console.log('icon, text, text2: ', icon, text, text2)*/}

        setActivity({...activity,
            tag : newTag,
            icon : icon,
            text : text,
            text2 : text2
        })
    }, [] )

    return (
        <StyledListItem onMenuBar={props.onMenuBar}>
            {
                !props.onMenuBar &&
                <>

                <ListItemAvatar>
                    <Avatar alt='user avatar' src={props.avatar ? props.avatar : noAvatar}/>
                </ListItemAvatar>
                {getNotificationIcon(activity.icon)}

                </>
            }
            <ListItemText
                primary = {
        			<div>
        				<span className = {'tag-object' + ' ' +  GetObjectColor(activity.tag)}>
                            {activity.tag}
                        </span>
        				<span className="time-ago-span">&#32;· há {getTimeDifference(props.createdAt)}</span>
        			</div>
        		}
                secondary = {
                    <div>
                        <span>
                            <a href={props.ownerHref} className="owner-name-a" >{props.ownerName}</a> {activity.text} <a href={props.recipientHref} className="recipient-name-a">{props.recipientName}</a> {activity.text2}
                        </span>
                    </div>
                }
                />
        </StyledListItem>
    )

}

const StyledListItem = styled(ListItem)`
    padding : ${props => props.onMenuBar ? "8px 16px !important" : "20px 60px !important"};
    border-bottom : 1px solid #eee;
    display : flex;
    justify-content : flex-start;
    align-items : center;
    min-heigth : 40px;

    a {
        text-decoration : none !important;
    }

    .time-ago-span {
    	font-size : 12px;
	font-family : 'Lato', medium;
	color : #787380;
    }

    .owner-name-a {
    	color : #00bcd4;
    }

    .recipient-name-a {
    	cursor : pointer;
	    color : #337ab7;
    }

    .icon {
        padding-right : 10px;
        color : #666;
    }

    .tag-object {
        font-family: Roboto;
        font-style: normal;
        font-weight: 700;
        font-size: 12px;
        line-height: normal;
        text-align: center;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #fff;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        border-radius: 10px;
        padding: 2px 4px;
    }

    .recurso-color {
        background-color : orange;
    }

    .colecao-color {
        background-color : blue;
    }

    .curadoria-color {
        background-color : red;
    }


`