import React, {useState, useContext, useEffect} from 'react'
import styled from 'styled-components'
import {apiDomain, apiUrl} from '../env.js'
import axios from 'axios'
import ActivityListItem from './ActivityListItem.js'
import {getAxiosConfig} from './HelperFunctions/getAxiosConfig.js'

export default function NotificationInner (props) {
    const [notifications, setNotifications] = useState([]);
    const [notificatonsLength, setLength] = useState(0);
    useEffect(() => {
        let config = getAxiosConfig()
        axios.get(`${apiUrl}/feed?offset=0&limit=30`, config)
        .then( (response) => {
                if ( response.headers['access-token'] ) {
                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
                }

                console.log('atividades response: ', response)
                setNotifications(response.data)
                setLength(response.data.length)

            },
            (error) => {
                console.log('error while running getNotifications')
            }
        )
    }, [])

    return (
        <ContainerDiv>
            <div className="cabecalho">
                <span style={{fontSize : "15px"}}>NOTIFICAÇÕES •</span>
                <span className="cabecalho-marcar">Marcar todas como lidas</span>
            </div>
            {
                notifications.map( (notification) =>
                    <ActivityListItem
                        onMenuBar={true}
                        avatar = {notification.owner.avatar ? apiDomain + notification.owner.avatar : null}
                        activity = {notification.activity}
                        actionType = {notification.trackable_type}
                        objectType = {notification.recipient_type}
                        createdAt = {notification.created_at}
                        ownerName = {notification.owner.name}
                        ownerHref = {'/usuario-publico/' + notification.owner.id}
                        recipientName =  {notification.recipient.name}
                    />
                )
            }
        </ContainerDiv>

    )
}

const ContainerDiv = styled.div`
    margin-top : 10px;
    right : 5%;
    width : 360px;
    max-height : 400px;
    position : absolute;
    box-shadow : 8px 8px 8px 8px
    rgba(0,0,0,.1);
    overflow-y : scroll;
    padding : 5px 5px 5px 5px;
    min-width : 160px;

    .cabecalho {
        border-bottom : 1px solid #666;

        .cabecalho-marcar {
            font-family: Lato,bold;
            font-size: 12px;
            -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
            float: right;
        }
    }
`