import React from 'react';
import Admin from './../admin'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchEntity } from '../actions/index'

interface CurrentUserProps {
  fetchEntity: any;
  permissionIds: number[];
  teamIds: number[];
  user: any;
  webinar: any;
}

interface CurrentUserDropDownState {
  imageUrl: string;
  webinar: {
    url: string
  }
}

class CurrentUserDropDown extends React.Component<CurrentUserProps, CurrentUserDropDownState> {

  constructor(props) {
    super(props);
    this.state = {
      imageUrl: Admin.currentUser.imageUrl,
      webinar: {
        url: ""
      }
    };
  }

  componentDidMount() {
    let pathDirectories = window.location.pathname.split('/');
    if (pathDirectories[pathDirectories.length - 1] === "chat") {
      this.props.fetchEntity({
        id: pathDirectories[pathDirectories.length - 2],
        directory: 'webinars',
        entityName: 'webinar'
      }).then(() => {
        this.setState({
          webinar: this.props.webinar
        });
      });
    }
  }

  clickMyAccount() {
    window.location.pathname = `admin/users/${Admin.currentUser.id}`;
  }

  render() {
    return(
      <div id="current-user-dropdown">
        { this.renderWebinarLinks() }
        { this.renderSpacer() }
        <div id="hover-area">
          <img id="profile-pic" src={ this.state.imageUrl } />
          <div id="triangle"></div>
          <div id="user-menu">
            <ul>
              <li onClick={ this.clickMyAccount }>My account</li>
              <li><a rel="nofollow" data-method="delete" href="/sign_out">Log out</a></li>
            </ul>
          </div>
        </div>
      </div>
    );
  }

  renderSpacer() {
    if (window.location.pathname.split("/").indexOf("chat") >= 0) {
      return(
        <div className="spacer"></div>
      );
    } else {
      return null;
    }
  }

  renderWebinarLinks() {
    if (window.location.pathname.split("/").indexOf("chat") >= 0) {
      return(
        <div className="webinar-links">
          <div className="button">
            Webinar Links
          </div>
          <ul className="page-links-inner-menu">
            <li><a href={ "/webinars/" + this.state.webinar.url + "/register" } target="_blank" rel="noopener noreferrer">Register</a></li>
            <li><a href={ "/webinars/" + this.state.webinar.url + "/thank-you" } target="_blank" rel="noopener noreferrer">Thank You</a></li>
            <li><a href={ "/webinars/" + this.state.webinar.url + "/play" } target="_blank" rel="noopener noreferrer">Play</a></li>
            <li><a href={ "/webinars/" + this.state.webinar.url + "/replay" } target="_blank" rel="noopener noreferrer">Replay</a></li>
          </ul>
        </div>
      );
    } else {
      return null;
    }
  }
}

const mapStateToProps = (reducers, props) => {
  return reducers.standardReducer;
};

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchEntity }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(CurrentUserDropDown);