Notifications

import React from "react";
import { HashLink as Link } from "react-router-hash-link";

import moment from "moment";
import ProfileImage from "./ProfileImage";
import IconProfile from "../img/icon-profile.svg";
import IconEvent from "../img/icon-events.svg";
import IconSchool from "../img/icon-schools.svg";

class Notification extends React.Component {
    constructor(props) {
        super(props);

        this.renderSwitch = this.renderSwitch.bind(this);
    }
    renderSwitch(param) {
        const notification = this.props.notification;
        let type, link, channelId;

        switch (param) {
            case "NEW_SCHOOL":
                return (
                    <Link
                        className={
                            notification.read === true
                                ? "notification notification--read media"
                                : "notification media"
                        }
                        onClick={this.props.handleCloseNotifications}
                        to={`/schools/${notification.context.slug}`}
                    >
                        <div className="media-left">
                            <figure
                                className="side-nav__icon"
                                style={{
                                    backgroundImage: `url(${IconEvent})`
                                }}
                            />
                        </div>
                        <div className="media-body">
                            Recently the school {notification.context.name} has
                            been added to the network.
                            <br />
                            <time className="notification__date">
                                {moment(notification.date).fromNow()}
                            </time>
                        </div>
                    </Link>
                );

            case "NEW_MESSAGE":
                type = notification.context.type;
                channelId = notification.channel_id;

                link =
                    type === "USER_PROFILE"
                        ? `/users/${notification.context.slug}/message/${notification.message_id}`
                        : type === "SCHOOL"
                        ? `/schools/${notification.context.slug}/message/${notification.message_id}`
                        : type === "NEW_MESSAGE"
                        ? `/wall/${notification.context.slug}/message/${notification.message_id}`
                        : type === "PROJECT" && channelId !== 0
                        ? `/projects/${notification.context.slug}/page/${channelId}/message/${notification.message_id}`
                        : type === "PROJECT"
                        ? `/projects/${notification.context.slug}/feedback`
                        : type === "EVENT_CONTRIBUTION"
                        ? `/events/${
                              notification.context.parent.slug
                          }/contributions/${notification.context.slug}/${
                              channelId === 1 ? "message" : "feedback"
                          }/${notification.message_id}`
                        : "/wall";

                return (
                    <Link
                        className={
                            notification.read === true
                                ? "notification notification--read media"
                                : "notification media"
                        }
                        to={link}
                    >
                        <div className="media-left">
                            {notification.sender && (
                                <div>
                                    {notification.sender.image !== "" ? (
                                        <ProfileImage
                                            members={notification.sender}
                                            size="medium"
                                            customClass="profile-image--notification"
                                        />
                                    ) : (
                                        <figure
                                            className="side-nav__icon"
                                            style={{
                                                backgroundImage: `url(${IconProfile})`
                                            }}
                                        />
                                    )}
                                </div>
                            )}
                        </div>
                        <div className="media-body">
                            {type === "PROJECT"
                                ? `You have a new comment on your project from ${notification.sender.name}`
                                : type === "SCHOOL"
                                ? `Your school has a new message from ${notification.sender.name}`
                                : type === "EVENT_CONTRIBUTION"
                                ? `You have a new comment on your contribution from ${notification.sender.name}`
                                : `You have a new message from ${notification.sender.name}`}
                            <br />
                            <time className="notification__date">
                                {moment(notification.date).fromNow()}
                            </time>
                        </div>
                    </Link>
                );

            case "NEW_REPLY_MESSAGE":
                type = notification.context.type;
                link =
                    type === "USER_PROFILE"
                        ? `/users/${notification.context.slug}/message/${notification.message_id}`
                        : type === "SCHOOL"
                        ? `/schools/${notification.context.slug}/message/${notification.message_id}`
                        : type === "MAIN_GROUP"
                        ? `/wall/message/${notification.message_id}`
                        : type === "NEW_MESSAGE"
                        ? `/wall/${notification.context.slug}/message/${notification.message_id}`
                        : type === "PROJECT"
                        ? `/projects/${notification.context.slug}`
                        : type === "EVENT_CONTRIBUTION"
                        ? `/events/${notification.context.parent.slug}/contributions/${notification.context.slug}/message/${notification.message_id}`
                        : "";

                return (
                    <Link
                        className={
                            notification.read === true
                                ? "notification notification--read media"
                                : "notification media"
                        }
                        onClick={this.props.handleCloseNotifications}
                        to={link}
                    >
                        <div className="media-left">
                            {notification.sender && (
                                <div>
                                    {notification.sender.image !== "" ? (
                                        <ProfileImage
                                            members={notification.sender}
                                            size="medium"
                                            customClass="profile-image--notification"
                                        />
                                    ) : (
                                        <figure
                                            className="side-nav__icon"
                                            style={{
                                                backgroundImage: `url(${IconProfile})`
                                            }}
                                        />
                                    )}
                                </div>
                            )}
                        </div>
                        <div className="media-body">
                            You have a reply on your message from{" "}
                            {notification.sender.name}
                            <br />
                            <time className="notification__date">
                                {moment(notification.date).fromNow()}
                            </time>
                        </div>
                    </Link>
                );

            case "NEW_INVITE":
                type =
                    notification.context.type === "PROJECT"
                        ? "projects"
                        : "events";
                return (
                    <Link
                        className={
                            notification.read === true
                                ? "notification notification--read media"
                                : "notification media"
                        }
                        onClick={this.props.handleCloseNotifications}
                        to={`/invites`}
                    >
                        <div className="media-left">
                            {notification.sender && (
                                <div>
                                    {notification.sender.image !== "" ? (
                                        <ProfileImage
                                            members={notification.sender}
                                            size="medium"
                                            customClass="profile-image--notification"
                                        />
                                    ) : (
                                        <figure
                                            className="side-nav__icon"
                                            style={{
                                                backgroundImage: `url(${IconProfile})`
                                            }}
                                        />
                                    )}
                                </div>
                            )}
                        </div>
                        <div className="media-body">
                            {notification.context.type === "PROJECT"
                                ? `${notification.sender.name} invited you to the project ${notification.context.name}`
                                : notification.context.type ===
                                  "EVENT_CONTRIBUTION"
                                ? `${notification.sender.name} invited you for to an event contribution for the event ${notification.context.name}`
                                : ""}
                            <br />
                            <time className="notification__date">
                                {moment(notification.date).fromNow()}
                            </time>
                        </div>
                    </Link>
                );

            case "NEW_EVENT":
                return (
                    <Link
                        className={
                            notification.read === true
                                ? "notification notification--read media"
                                : "notification media"
                        }
                        onClick={this.props.handleCloseNotifications}
                        to={`/events/${notification.context.slug}`}
                    >
                        <div className="media-left">
                            <figure
                                className="side-nav__icon"
                                style={{
                                    backgroundImage: `url(${IconEvent})`
                                }}
                            />
                        </div>
                        <div className="media-body">
                            The event {notification.context.name} has been
                            added.
                            <br />
                            <time className="notification__date">
                                {moment(notification.date).fromNow()}
                            </time>
                        </div>
                    </Link>
                );

            case "START_EVENT":
                return (
                    <Link
                        className={
                            notification.read === true
                                ? "notification notification--read media"
                                : "notification media"
                        }
                        onClick={this.props.handleCloseNotifications}
                        to={`/events/${notification.context.slug}`}
                    >
                        <div className="media-left">
                            <figure
                                className="side-nav__icon"
                                style={{
                                    backgroundImage: `url(${IconEvent})`
                                }}
                            />
                        </div>
                        <div className="media-body">
                            The event {notification.context.name} has been
                            started.
                            <br />
                            <time className="notification__date">
                                {moment(notification.date).fromNow()}
                            </time>
                        </div>
                    </Link>
                );

            case "END_EVENT":
                return (
                    <Link
                        className={
                            notification.read === true
                                ? "notification notification--read media"
                                : "notification media"
                        }
                        onClick={this.props.handleCloseNotifications}
                        to={`/events/${notification.context.slug}`}
                    >
                        <div className="media-left">
                            <figure
                                className="side-nav__icon"
                                style={{
                                    backgroundImage: `url(${IconEvent})`
                                }}
                            />
                        </div>
                        <div className="media-body">
                            The event {notification.context.name} has ended.
                            <br />
                            <time className="notification__date">
                                {moment(notification.date).fromNow()}
                            </time>
                        </div>
                    </Link>
                );

            case "NEW_EVENT_CONTRIBUTION":
                return (
                    <Link
                        className={
                            notification.read === true
                                ? "notification notification--read media"
                                : "notification media"
                        }
                        onClick={this.props.handleCloseNotifications}
                        to={`/events/${notification.sender.slug}`}
                    >
                        <div className="media-left">
                            {notification.sender && (
                                <div>
                                    {notification.sender.image !== "" ? (
                                        <ProfileImage
                                            members={notification.sender}
                                            size="medium"
                                            customClass="profile-image--notification"
                                        />
                                    ) : (
                                        <figure
                                            className="side-nav__icon"
                                            style={{
                                                backgroundImage: `url(${IconProfile})`
                                            }}
                                        />
                                    )}
                                </div>
                            )}
                        </div>
                        <div className="media-body">
                            New event contribution
                            <br />
                            <time className="notification__date">
                                {moment(notification.date).fromNow()}
                            </time>
                        </div>
                    </Link>
                );

            case "NEW_PROJECT":
                return (
                    <Link
                        className={
                            notification.read === true
                                ? "notification notification--read media"
                                : "notification media"
                        }
                        onClick={this.props.handleCloseNotifications}
                        to={`/projects/${notification.sender.slug}`}
                    >
                        <div className="media-left">
                            {notification.sender && (
                                <div>
                                    {notification.sender.image !== "" ? (
                                        <ProfileImage
                                            members={notification.sender}
                                            size="medium"
                                            customClass="profile-image--notification"
                                        />
                                    ) : (
                                        <figure
                                            className="side-nav__icon"
                                            style={{
                                                backgroundImage: `url(${IconProfile})`
                                            }}
                                        />
                                    )}
                                </div>
                            )}
                        </div>
                        <div className="media-body">
                            New project
                            <br />
                            <time className="notification__date">
                                {moment(notification.date).fromNow()}
                            </time>
                        </div>
                    </Link>
                );

            case "NEW_GROUP_MEMBER":
                type = notification.sender.type;
                const contextType =
                    type === "SCHOOL"
                        ? "schools"
                        : type === "PROJECT"
                        ? "projects"
                        : "events";

                link = `/${contextType}/${notification.sender.slug}`;
                console.log("NEW_GROUP_MEMBER", type);

                if (type === "EVENT_CONTRIBUTION") {
                    link = `/events/${notification.sender.parent.slug}/contributions/${notification.context.slug}`;
                }

                // notification.context.parent.slug
                return (
                    <Link
                        className={
                            notification.read === true
                                ? "notification notification--read media"
                                : "notification media"
                        }
                        onClick={this.props.handleCloseNotifications}
                        to={link}
                    >
                        <div className="media-left">
                            {notification.sender && (
                                <div>
                                    {notification.sender.image !== "" ? (
                                        <ProfileImage
                                            members={notification.sender}
                                            size="medium"
                                            customClass="profile-image--notification"
                                        />
                                    ) : (
                                        <figure
                                            className="side-nav__icon"
                                            style={{
                                                backgroundImage: `url(${IconProfile})`
                                            }}
                                        />
                                    )}
                                </div>
                            )}
                        </div>
                        <div className="media-body">
                            {notification.context.name} has been added to{" "}
                            {notification.sender.name}.<br />
                            <time className="notification__date">
                                {moment(notification.date).fromNow()}
                            </time>
                        </div>
                    </Link>
                );
            case "NEW_LIKE":
                type = notification.context.type;

                if (type === "EVENT_CONTRIBUTION") {
                    return (
                        <Link
                            className={
                                notification.read === true
                                    ? "notification notification--read media"
                                    : "notification media"
                            }
                            onClick={this.props.handleCloseNotifications}
                            to={`/events/${notification.context.parent.slug}/contributions/${notification.context.slug}`}
                        >
                            <div className="media-left">
                                {notification.sender && (
                                    <div>
                                        {notification.sender.image !== "" ? (
                                            <ProfileImage
                                                members={notification.sender}
                                                size="medium"
                                                customClass="profile-image--notification"
                                            />
                                        ) : (
                                            <figure
                                                className="side-nav__icon"
                                                style={{
                                                    backgroundImage: `url(${IconProfile})`
                                                }}
                                            />
                                        )}
                                    </div>
                                )}
                            </div>
                            <div className="media-body">
                                {notification.sender.name} liked{" "}
                                {notification.context.name}
                                <br />
                                <time className="notification__date">
                                    {moment(notification.date).fromNow()}
                                </time>
                            </div>
                        </Link>
                    );
                } else if (type === "PROJECT") {
                    return (
                        <Link
                            className={
                                notification.read === true
                                    ? "notification notification--read media"
                                    : "notification media"
                            }
                            onClick={this.props.handleCloseNotifications}
                            to={`/projects/${notification.context.slug}`}
                        >
                            <div className="media-left">
                                {notification.sender && (
                                    <div>
                                        {notification.sender.image !== "" ? (
                                            <ProfileImage
                                                members={notification.sender}
                                                size="medium"
                                                customClass="profile-image--notification"
                                            />
                                        ) : (
                                            <figure
                                                className="side-nav__icon"
                                                style={{
                                                    backgroundImage: `url(${IconProfile})`
                                                }}
                                            />
                                        )}
                                    </div>
                                )}
                            </div>
                            <div className="media-body">
                                {notification.sender.name} liked your project{" "}
                                {notification.context.name}
                                <br />
                                <time className="notification__date">
                                    {moment(notification.date).fromNow()}
                                </time>
                            </div>
                        </Link>
                    );
                }

            default:
                return ``;
        }
    }

    render() {
        const notification = this.props.notification;
        return <span className="">{this.renderSwitch(notification.type)}</span>;
    }
}

export default Notification;