import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import * as qs from 'qs';

import Icon from './components/Icon';
import { Discover, Discussions, Blog, Tag, Home } from './components/Feeds';
import { Friends, Readers } from './components/Users';
import Settings from './components/Settings';
import Contacts from './components/Contacts';
import Chat from './components/Chat';
import Post from './components/Post';
import Thread from './components/Thread';
import LoginButton from './components/LoginButton';
import Avatar from './components/Avatar';
import Header from './components/Header';
import SearchBox from './components/SearchBox';
import NavigationIcon from './components/NavigationIcon';

import cookies from 'react-cookies';

import { me } from './api';

const app = document.getElementById('app');

export default class App extends React.Component {
  constructor(props) {
    super(props);
    let params = qs.parse(window.location.search.substring(1));
    if (params.hash) {
      cookies.save('hash', params.hash, { path: '/' });
      window.history.replaceState({}, document.title, `${window.location.protocol}//${window.location.host}${window.location.pathname}`);
    }
    this.state = {
      visitor: {
        uid: 0,
        hash: cookies.load('hash')
      },
      appMarginLeft: 'inherit'
    };
    this.pm = React.createRef();
    this.thread = React.createRef();
    this.sidebar = React.createRef();
  }

  initES = () => {
    if (!('EventSource' in window)) {
      return;
    }
    const params = { hash: this.state.visitor.hash };
    let url = new URL(`https://api.juick.com/events?${qs.stringify(params)}`);
    this.es = new EventSource(url);
    this.es.onopen = () => {
      console.log('online');
    };
    this.es.addEventListener('msg', msg => {
      try {
        var jsonMsg = JSON.parse(msg.data);
        console.log('data: ' + msg.data);
        // refresh server visitor state (unread counters)
        me().then(visitor => {
          this.setState({
            visitor: visitor
          });
        });
        if (jsonMsg.service) {
          return;
        }
        if (!jsonMsg.mid) {
          this.pm.current.onMessage(jsonMsg);
        }
        if (jsonMsg.rid && this.thread.current) {
          this.thread.current.onReply(jsonMsg);
        }
      } catch (err) {
        console.log(err);
      }
    });
  }

  componentDidMount() {
    const { hash } = this.state.visitor;
    this.initES();
    if (hash) {
      me().then(visitor => this.auth(visitor));
    }
  }
  search = (history, pathname, searchString) => {
    let location = {};
    location.pathname = pathname;
    location.search = `?search=${searchString}`;
    history.push(location);
  }
  toggleSidebar = () => {
    const isMobile = window.matchMedia('width < 62.5rem');
    if (isMobile.matches) {
      let width = this.sidebar.current.style.width;
      this.sidebar.current.style.width = width === '248px' ? '0' : '248px';
      let leftMargin = this.state.appMarginLeft === 'inherit' ? '250px' : 'inherit';
      this.setState({
        appMarginLeft: leftMargin
      });
      app.style.marginLeft = leftMargin;
    }
  }
  render() {
    const user = this.state.visitor;
    return (
      <Router>
        <>
          <Header>
            <div id="header_wrapper">
              {
                user.uid > 0 ?
                  <NavigationIcon onToggle={this.toggleSidebar} />
                  : <div id="logo">
                    <Link to="/">Juick</Link>
                  </div>
              }
              <div id="search" className="desktop">
                <SearchBox pathname="/discover" onSearch={this.search} {...this.props} />
              </div>
              <nav id="global">
                {user.uid > 0 ?
                  <Link to={{ pathname: '/' }}>
                    <Icon name="ei-bell" size="s" /><span className="desktop">Discuss</span>
                    {
                      user.unreadCount &&
                      <span className="badge">{user.unreadCount}</span>
                    }
                  </Link>
                  :
                  <Link to='/?media=1' rel="nofollow">
                    <Icon name="ei-camera" size="s" />
                    <span className="desktop">Photos</span>
                  </Link>
                }
                <Link to={{ pathname: '/discover' }} rel="nofollow">
                  <Icon name="ei-search" size="s" />
                  <span className="desktop">Discover</span>
                </Link>

                {user.uid > 0 ?
                  <Link to={{ pathname: '/post' }}>
                    <Icon name="ei-pencil" size="s" />
                    <span className="desktop">Post</span>
                  </Link>
                  :
                  <LoginButton title="Login" onAuth={this.auth} />
                }
              </nav>
            </div>
          </Header>
          <section id="content">
            <Switch>
              <Route exact path="/" render={(props) => <Discussions visitor={user} {...props} />} />
              <Route exact path="/home" render={(props) => <Home visitor={user} {...props} />} />
              <Route exact path="/discover" render={(props) =>
                <Discover visitor={user} {...props} />
              } />
              <Route exact path="/settings" render={(props) =>
                <Settings visitor={user} {...props} onChange={this.auth} />
              } />
              <Route exact path="/post" render={(props) => <Post visitor={user} {...props} />} />
              <Route exact path="/pm" render={(props) => <Contacts visitor={user} {...props} />} />
              <Route exact path="/pm/:user" render={(props) => <Chat ref={this.pm} visitor={user} {...props} />} />
              <Route exact path="/:user/friends" render={(props) => <Friends user={props.match.params.user} {...props} />} />
              <Route exact path="/:user/readers" render={(props) => <Readers user={props.match.params.user} {...props} />} />
              <Route exact path="/:user" render={(props) => <Blog key={props.match.params.user} visitor={user} {...props} />} />
              <Route exact path="/tag/:tag" render={(props) => <Tag visitor={user} {...props} />} />
              <Route exact path="/:user/:mid" render={(props) => <Thread ref={this.thread} visitor={user} {...props} />} />
            </Switch>
          </section>
          {
            user.uid > 0 &&
            <aside id="sidebar" ref={this.sidebar}>
              <Avatar user={user} />
              <Link to="/?show=my" onClick={this.toggleSidebar}>
                <Icon name="ei-clock" size="s" />
                <span className="desktop">My feed</span>
              </Link>
              <Link to="/pm" onClick={this.toggleSidebar}>
                <Icon name="ei-envelope" size="s" />
                <span className="desktop">Messages</span>
              </Link>
              <Link to="/?show=discuss" onClick={this.toggleSidebar}>
                <Icon name="ei-bell" size="s" />
                <span className="desktop">Discussions</span>
              </Link>
              <Link to="/settings" rel="nofollow" onClick={this.toggleSidebar}>
                <Icon name="ei-gear" size="s" />
                <span className="desktop">Settings</span>
              </Link>
            </aside>
          }
        </>
      </Router>
    );
  }
  auth = (visitor) => {
    this.setState({
      visitor: visitor
    });
  }
}