import PropTypes from "prop-types";
import { Component } from "react";

import { defineMessages, injectIntl } from "react-intl";

import NavigationPortal from "flavours/glitch/components/navigation_portal";
import { timelinePreview, trendsEnabled } from "flavours/glitch/initial_state";
import { transientSingleColumn } from "flavours/glitch/is_mobile";

import ColumnLink from "./column_link";
import DisabledAccountBanner from "./disabled_account_banner";
import FollowRequestsColumnLink from "./follow_requests_column_link";
import ListPanel from "./list_panel";
import NotificationsCounterIcon from "./notifications_counter_icon";
import SignInBanner from "./sign_in_banner";

const messages = defineMessages({
  home: { id: "tabs_bar.home", defaultMessage: "Home" },
  notifications: { id: "tabs_bar.notifications", defaultMessage: "Notifications" },
  explore: { id: "explore.title", defaultMessage: "Explore" },
  firehose: { id: "column.firehose", defaultMessage: "Live feeds" },
  direct: { id: "navigation_bar.direct", defaultMessage: "Private mentions" },
  favourites: { id: "navigation_bar.favourites", defaultMessage: "Favorites" },
  bookmarks: { id: "navigation_bar.bookmarks", defaultMessage: "Bookmarks" },
  lists: { id: "navigation_bar.lists", defaultMessage: "Lists" },
  preferences: { id: "navigation_bar.preferences", defaultMessage: "Preferences" },
  followsAndFollowers: { id: "navigation_bar.follows_and_followers", defaultMessage: "Follows and followers" },
  about: { id: "navigation_bar.about", defaultMessage: "About" },
  search: { id: "navigation_bar.search", defaultMessage: "Search" },
  advancedInterface: { id: "navigation_bar.advanced_interface", defaultMessage: "Open in advanced web interface" },
  openedInClassicInterface: { id: "navigation_bar.opened_in_classic_interface", defaultMessage: "Posts, accounts, and other specific pages are opened by default in the classic web interface." },
  app_settings: { id: "navigation_bar.app_settings", defaultMessage: "App settings" },
  logout: { id: "navigation_bar.logout", defaultMessage: "Log out" },
});

class NavigationPanel extends Component {

  static contextTypes = {
    router: PropTypes.object.isRequired,
    identity: PropTypes.object.isRequired,
  };

  static propTypes = {
    intl: PropTypes.object.isRequired,
    onOpenSettings: PropTypes.func,
    onLogout: PropTypes.func,
  };

  isFirehoseActive = (match, location) => {
    return match || location.pathname.startsWith("/public");
  };

  render() {
    const { intl, onOpenSettings, onLogout } = this.props;
    const { signedIn, disabledAccountId } = this.context.identity;

    return (
      <div className='navigation-panel'>
        {transientSingleColumn && (
          <div className='navigation-panel__logo'>
            <div className='switch-to-advanced'>
              {intl.formatMessage(messages.openedInClassicInterface)}
              {" "}
              <a href={`/deck${location.pathname}`} className='switch-to-advanced__toggle'>
                {intl.formatMessage(messages.advancedInterface)}
              </a>
            </div>
            <hr />
          </div>
        )}

        {signedIn && (
          <>
            <ColumnLink transparent to='/home' icon='home' text={intl.formatMessage(messages.home)} />
            <ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} />
            <FollowRequestsColumnLink />
          </>
        )}

        {trendsEnabled ? (
          <ColumnLink transparent to='/explore' icon='hashtag' text={intl.formatMessage(messages.explore)} />
        ) : (
          <ColumnLink transparent to='/search' icon='search' text={intl.formatMessage(messages.search)} />
        )}

        {(signedIn || timelinePreview) && (
          <ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' text={intl.formatMessage(messages.firehose)} />
        )}

        {!signedIn && (
          <div className='navigation-panel__sign-in-banner'>
            <hr />
            { disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner /> }
          </div>
        )}

        {signedIn && (
          <>
            <ColumnLink transparent to='/conversations' icon='at' text={intl.formatMessage(messages.direct)} />
            <ColumnLink transparent to='/bookmarks' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} />
            <ColumnLink transparent to='/favourites' icon='star' text={intl.formatMessage(messages.favourites)} />
            <ColumnLink transparent to='/lists' icon='list-ul' text={intl.formatMessage(messages.lists)} />

            <ListPanel />

            <hr />

            <ColumnLink transparent onClick={onOpenSettings} icon='cogs' text={intl.formatMessage(messages.app_settings)} />
            <ColumnLink transparent onClick={onLogout} icon='sign-out' text={intl.formatMessage(messages.logout)} />
          </>
        )}

        <div className='navigation-panel__legal'>
          <hr />
          <ColumnLink transparent to='/about' icon='ellipsis-h' text={intl.formatMessage(messages.about)} />
        </div>


        <NavigationPortal />
      </div>
    );
  }

}

export default injectIntl(NavigationPanel);