import React from 'react'
import ContactCard from '../../ContactCard.js'
import {apiDomain} from '../../../env';
import NoContent from './NoContent.js'
import {WhiteContainer, StyledGrid} from '../StyledComponents.js'
import Title from './PanelTitle.js'
import Grid from '@material-ui/core/Grid';
import {ButtonsAreaRede} from './ButtonsArea'

export default function PanelTemplateRede (props) {
    const RenderContactCard = (card, followerBoolean) => {
        if (followerBoolean) {
            return (
                <ContactCard
                    name = {card.follower.name}
                    avatar = {card.follower.avatar ? apiDomain + card.follower.avatar : null}
                    cover={card.follower.cover ? apiDomain + card.follower.cover : null}
                    numCollections = {card.follower.collections_count}
                    numLearningObjects = {card.follower.learning_objects_count}
                    follow_count={card.follower.follows_count}
                    followed = {card.follower.followed || null}
                    followerID = {card.follower.id}
                    href={'/usuario-publico/' + card.follower.id}
                />
            )
        }
        else {
            return (
                <ContactCard
                         name = {card.followable.name}
                         avatar = {card.followable.avatar ? apiDomain + '/' + card.followable.avatar : null}
                         cover={apiDomain + card.followable.cover}
                         numCollections = {card.followable.collections_count}
                         numLearningObjects = {card.followable.learning_objects_count}
                         follow_count={card.followable.follows_count}
                         followed = {card.followable.followed || null}
                         followedID = {card.followable.id}
                         href={'/usuario-publico/' + card.followable.id}
               />
            )
        }
    }

    return (
        <WhiteContainer>

            <Title
                title={props.title}
                length={props.length}
            />


            {/*if length is 0, display "No Content" text */}
            {/*otherwise, display either ContactCard and Buttons */}
            {
                props.length === 0 ?
                (
                    [
                        <NoContent text={props.noContentText}/>
                    ]
                )
                :
                (
                    [
                        <React.Fragment>
                            <StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
                                {
                                    props.sliceArr.map( (card) =>
                                    <>
                                    {
                                        card.follower &&
                                        <Grid item md={3} xs={12} key={card.id}>
                                            {RenderContactCard(card, props.follower)}
                                        </Grid>
                                    }
                                    </>
                                    )
                                }
                            </StyledGrid>

                            <ButtonsAreaRede
                                sliceLength={props.sliceArr.length}
                                length={props.length}
                                showMore={() => props.showMore()}
                                showAll={() => props.showAll()}
                            />
                        </React.Fragment>
                    ]
                )
            }

        </WhiteContainer>
    )
}