/*
  Copyright 2018 Joseph Weston
 
  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.
 
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
 
  You should have received a copy of the GNU General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import React from 'react' ;

 import AnimateHeight from 'react-animate-height'

 import Spinner from 'react-spinkit'
 import {
   ComposableMap,
   ZoomableGroup,
   Geographies,
   Geography,
 } from "react-simple-maps"
 

 import 'normalize.css/normalize.css'
 import './static/styles.css'

 
 // Import licence for GEOJSON so as to include it into the webpack output.
 // This is necessary to avoid violating the license terms.
 import './static/LICENSE'
 import World from './static/world.geo.json'
 
 
 const VPN = Object.freeze({
   disconnected:1,
   connecting:2,
   connected:3,
   disconnecting: 4,

   error: 5,

 }) ;
 
 class Nord extends React.Component {
 
   constructor(props) {
     super(props) ;
     this.state = {

         enabled: false,
         loading: true,

         status: VPN.disconnected,
         country: null,
         host: null,

         viewportWidth: null,

     } ;

     this.connection = null

     this.connect = this.connect.bind(this) ;

     this.updateDimensions = this.updateDimensions.bind(this) ;

     this.disconnect = this.disconnect.bind(this) ;

     this.handleData = this.handleData.bind(this) ;
   }
 

   updateDimensions() {
     this.setState({
       viewportWidth: Math.max(document.documentElement.clientWidth,
                               window.innerWidth || 0)
     }) ;
   }
 
   componentWillMount() {
     this.updateDimensions() ;
   }
 
   componentWillUnmount() {
     window.removeEventListener("resize", this.updateDimensions) ;
   }
 

   componentDidMount() {

     const upstream = location.hostname+(location.port ? ':'+location.port : '')
     window.addEventListener("resize", this.updateDimensions) ;

     this.setState({enabled: false, loading: true})

     this.connection = new WebSocket('ws://'+upstream+'/api') ;

     this.connection.onopen = () =>
       this.setState({enabled: true, loading: false}) ;
     this.connection.onerror = () =>
       this.setState({enabled: false, loading: false}) ;
     this.connection.onclose = () =>
       this.setState({enabled: false, loading: false}) ;
     this.connection.onmessage = this.handleData ;
   }
 
   handleData(msg) {
     msg = JSON.parse(msg.data)
     switch(msg.state) {
       case "connected":

         this.setState({
             status: VPN.connected,
             host: msg.host
         }) ;

         break ;
       case "disconnected":

         this.setState({
             status: VPN.disconnected
         }) ;
         break ;
       case "connecting":
         this.setState({
             status: VPN.connecting,
             country: msg.country,
             host: null,
         }) ;
         break ;
       case "disconnecting":
         this.setState({
             status: VPN.disconnecting,
         }) ;
         break ;
       case "error":
         this.setState({
             status: VPN.error,
             error_message: msg.message
         }) ;

         break ;
     }

   }
 
   connect(geography) {
     const country_info = geography.properties ;

 //    this.setState({
 //        status: VPN.connecting,
 //        country: country_info.NAME,
 //        host: null,
 //    }) ;

 
     this.connection.send(JSON.stringify({
       method: 'connect',
       country: country_info.ISO_A2
     })) ;

   }
 
   disconnect() {

 //    this.setState((prev) => ({ ...prev, status: VPN.disconnecting })) ;

 
     this.connection.send(JSON.stringify({
       method: 'disconnect'
     })) ;

   }
 
   render() {
     return (

       <div id="grid">
         <Title className="full-width"/>
         <section className="clip">
           <VPNStatus connection={ this.state }
                      onDisconnect={ this.disconnect }
                      className="full-width overlap"/>
           <WorldMap onClick={ this.connect }
                     viewportWidth={ this.state.viewportWidth }/>
         </section>

       </div>
     ) ;
   }
 
 }
 
 

 const Title = (props) => {
   return (
     <section id="title" className={props.className}>
     <h1 className="no-margin">Nord</h1>
     </section>
   ) ;
 } ;

 const ConnectionSpinner = () => {
   return (
     <div>
       <div className="connection-spinner">
         <Spinner name="double-bounce" fadeIn="none" />
       </div>

     </div>
   ) ;

 } ;

 const DisconnectButton = (props) => {
   const onClick = props.connected ? props.onDisconnect : null ;
   const content = props.connected ? "Disconnect" : <ConnectionSpinner/> ;
   return (
     <div className="disconnect-button-wrapper">
       <button className="disconnect-button red" onClick={ onClick }>
         { content }

       </button>

   </div>
   ) ;
 } ;
 
 const VPNStatus = (props) => {
   const connection = props.connection ;

 
   var color = "" ;

   var content = null

   switch(connection.status) {

     case VPN.connecting:

       color = "yellow" ;
       content = <div>
                   Connecting to servers in <b>{ connection.country }</b>
                   <ConnectionSpinner/>
              </div>;

       break ;
     case VPN.connected:
     case VPN.disconnecting:

     case VPN.disconnected:
       color = "green" ;
       content = <div>
                   Connected to <b>{ connection.host }</b>
                   <DisconnectButton
                     connected={ connection.status == VPN.connected }
                     onDisconnect={ props.onDisconnect }/>
                </div> ;

       break ;

     case VPN.error:
       color = "red" ;
       content = <div>Error on backend: {connection.error_message}</div> ;

   }
 

   if (!connection.enabled && !connection.loading) {

     color = "red" ;
     content = <div>Lost connection to backend</div> ;

   }
 

   return (

       <AnimateHeight
           className={props.className}
           duration={ 500 }
           height={ connection.status == VPN.disconnected ? '0' : 'auto'}>
           <div className={"padded " + color}>
             {content}

           </div>

       </AnimateHeight>

   ) ;
 } ;
 
 
 const WorldMap = (props) => {
 

   var zoom = 7 ;
   var center = [ 5, 65 ] ;
   if (props.viewportWidth > 500) {
     zoom = 4 ;
     center = [5, 50]
   }
   if (props.viewportWidth > 1000) {
     zoom = 2 ;
   }
 
 

   const default_map_style = {
     fill: "#ECEFF1",
     stroke: "#607D8B",
     strokeWidth: 0.75,
     outline: "none",
   } ;
   const map_container_style = {
     width: "100%",

     height: "100%",

   } ;
   const map_style = {
     default: default_map_style,
     hover: { ...default_map_style, fill: "#CFD8DC" },
     pressed: { ...default_map_style, fill: "#CFD8DC" },
   } ;
 
   return (
     <ComposableMap style={ map_container_style }>
       <ZoomableGroup zoom={ zoom } center={ center }>
         <Geographies geography={ World }>
           {(geographies, projection) => geographies.map(geography => (
             <Geography
               key={ geography.id }
               geography={ geography }
               projection={ projection }
               style={ map_style }
               onClick={ props.onClick }
               />
           ))}
         </Geographies>
       </ZoomableGroup>
     </ComposableMap>
   ) ;
 } ;
 
 
 export default Nord ;