import React from 'react';
import { Popover, OverlayTrigger } from 'react-bootstrap';
import { xhrClient } from './xhrClient';
// import Upgrade from '../payment';
import filter from 'lodash/filter';
import Button from '@material-ui/core/Button';
import moment from 'moment';

// css
require('./styles.css');

class Notifications extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      notifications: [],
      showUpgradeModal: false,
    };
  }

  componentWillMount = () =>
    this.setState({ notifications: this.props.notifications });

  componentWillReceiveProps(nextProps) {
    if (nextProps.notifications !== this.props.notifications) {
      this.setState({ notifications: nextProps.notifications });
    }
  }

  handleTouchTap = event => {
    event.preventDefault();
    this.setState({ open: true, anchorEl: event.currentTarget });
  };

  clearNotifications() {
    console.log('CLEARING NOTIFICATIONS');
    this.props.updateNotificationsSeen();
  }

  handleRequestClose = () => this.setState({ open: false });

  closeUpgradeModal = () => this.setState({ showUpgradeModal: false });

  handleNotificationResponse(type, data) {
    if (type === 'addDeveloper') {
      this.props.fetchApps();
      this.props.deleteNotificationById(data);
    } else if (type === 'delete') {
      this.props.deleteNotificationById(data);
    }
  }

  callAction(data, obj) {
    const { meta } = obj;
    const { url, method, payload, external } = data;
    const thisObj = this;

    if (meta.notificationType === 'payment') {
      this.setState({
        showUpgradeModal: true,
        appId: data.appId,
        planId: data.planId,
      });
    } else if (!external) {
      xhrClient(this.props.USER_SERVICE_URL)({
        url,
        method,
        data: payload,
      }).then(
        res => {
          this.handleNotificationResponse(meta.notificationType, obj._id);
        },
        err => {
          console.log(err);
          this.props.showAlert('error', err);
        },
      );
    } else window.open(url, '_blank');
  }

  deleteNotification = id => this.handleNotificationResponse('delete', id);

  render() {
    const { notifications } = this.state;
    const pendingTasks = notifications ? notifications.length : 0;
    const unSeenNotifications =
      notifications && notifications.length
        ? filter(notifications, { seen: false }).length
        : 0;

    const notificationDiv = notifications && notifications.length ? notifications.map((x, i) => {
      let cancelButton = null;
      let acceptButton = null;
      if (x.meta) {
        cancelButton = x.meta.cancelButton;
        acceptButton = x.meta.acceptButton;
      }

      const getTime = x => {
        const notTime = moment(x.date);
        const secs = moment().diff(notTime, 'seconds');
        return secs > 172800
          ? notTime.format('Do MMMM')
          : `${moment.duration(secs, 'seconds').humanize()} ago`;
      };

      return (
        <div
          className={
            x.seen ? 'notificationdiv' : 'notificationdiv unSeenNotification'
          }
          key={i}
        >
          <div className="notdatacontainer">
            <p
              className="nottextinv"
              dangerouslySetInnerHTML={{ __html: x.text }}
            />
            <div className="noteinvbtncontainer">
              <span className="nottimestamp"> {getTime(x)} </span>
              {cancelButton && (
                <button
                  className="cancelbtnnotinv"
                  onClick={this.callAction.bind(this, cancelButton, x)}
                >
                  {cancelButton.text}
                </button>
              )}
              {acceptButton && (
                <button
                  className="acceptbtnnotinv"
                  onClick={this.callAction.bind(this, acceptButton, x)}
                >
                  {acceptButton.text}
                </button>
              )}
              {x.notificationType === 'inform' && (
                <button
                  className="acceptbtnnotinv"
                  onClick={this.deleteNotification.bind(this, x._id)}
                >
                  Okay
                </button>
              )}
            </div>
          </div>
        </div>
      );
    }) : [];

    const _id = new Date().getTime();
    const popover = (
      <Popover id={_id} title="Notifications" className="popovernotifications">
        <button
          className={pendingTasks ? 'clearnotbtn' : 'hide'}
          onClick={this.clearNotifications.bind(this)}
          style={{ display: 'block' }}
        >
          Mark All as read
        </button>
        {!pendingTasks ? (
          <div style={{ textAlign: 'center' }}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="40"
              height="40"
              viewBox="0 -3 26 26"
              className="ion-ios-bell notificationemptybell"
            >
              <g fill="none" fillRule="evenodd">
                <path
                  fill="#AAB7C4"
                  d="M7.65 16.914A2.721 2.721 0 0 0 10.298 19c1.282 0 2.36-.886 2.647-2.086H7.65zm7.917-8.129a50.014 50.014 0 0 1-.45-2.963c-.242-2.031-2.076-3.56-4.246-3.56h-.86c-2.17 0-4.004 1.529-4.245 3.56a47.54 47.54 0 0 1-.451 2.963c-.42 2.314-1.342 3.98-2.097 5.11-.576.859.053 1.98 1.133 1.82h12.117c1.08.16 1.72-.961 1.133-1.82-.85-1.256-1.657-3.026-2.034-5.11zm-5.137-6.69a1.048 1.048 0 1 0 .002-2.096 1.048 1.048 0 0 0-.002 2.095z"
                />
              </g>
            </svg>
            <p className="notificationemptymessage">
              {"We'll let you know when we've got something new for you!"}
            </p>
          </div>
        ) : (
          <div className="notification-wrap">{notificationDiv}</div>
        )}
      </Popover>
    );

    return (
      <div>
        {this.state.showUpgradeModal && (
          <div // Upgrade
            appId={this.state.appId}
            planId={this.state.planId}
            show={this.state.showUpgradeModal}
            close={this.closeUpgradeModal}
          />
        )}
        <OverlayTrigger trigger="click" rootClose placement="bottom" overlay={popover}>
          <Button className="header-icon">
            {unSeenNotifications > 0 ? <div className="red-dot" /> : <span />}

            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="29"
              height="29"
              viewBox="0 -3 26 26"
            >
              <g fill="none" fillRule="evenodd">
                <path
                  fill="#AAB7C4"
                  d="M7.65 16.914A2.721 2.721 0 0 0 10.298 19c1.282 0 2.36-.886 2.647-2.086H7.65zm7.917-8.129a50.014 50.014 0 0 1-.45-2.963c-.242-2.031-2.076-3.56-4.246-3.56h-.86c-2.17 0-4.004 1.529-4.245 3.56a47.54 47.54 0 0 1-.451 2.963c-.42 2.314-1.342 3.98-2.097 5.11-.576.859.053 1.98 1.133 1.82h12.117c1.08.16 1.72-.961 1.133-1.82-.85-1.256-1.657-3.026-2.034-5.11zm-5.137-6.69a1.048 1.048 0 1 0 .002-2.096 1.048 1.048 0 0 0-.002 2.095z"
                />
              </g>
            </svg>
          </Button>
        </OverlayTrigger>
      </div>
    );
  }
}

export default Notifications;