import {
    Button, ButtonGroup, Collapse, Nav, Navbar, NavbarBrand, NavbarText, NavbarToggler, NavItem, NavLink
} from 'reactstrap';
import {connect} from 'react-redux';
import React, {useRef, useEffect, useState} from 'react';

import {logout} from '../api';
import {notify} from 'react-notify-toast';
import {Timer} from './Timer';

export class TurniereNavigation extends React.Component {
    constructor(props) {
        super(props);
        this.toggle = this.toggle.bind(this);
        this.togglerRef = React.createRef();
        this.state = {
            collapsed: true,
            isToggleVisible: true
        };
    }

    componentDidMount() {
        const observer = new IntersectionObserver(
            ([entry]) => {
                this.setState({isToggleVisible: entry.isIntersecting});
            },
            {threshold: 0.1}
        );

        if (this.togglerRef.current) {
            observer.observe(this.togglerRef.current);
        }

        this.observer = observer;
    }

    componentWillUnmount() {
        if (this.observer) {
            this.observer.disconnect();
        }
    }

    toggle() {
        this.setState({collapsed: !this.state.collapsed});
    }

    render() {
        const {tournament} = this.props;
        const {isToggleVisible} = this.state;

        return (
            <Navbar color="light" light expand="lg" sticky="top">
                <NavbarBrand className={'hide-below-260-w'} href="/">turnie.re</NavbarBrand>
                {tournament && tournament.timerEnd &&
                    <NavbarText className="m-auto">
                        <span className={'hide-below-340-w'}>Spielzeit: </span><Timer timerEnd={tournament.timerEnd}/>
                    </NavbarText>
                }
                {isToggleVisible && <NavbarText>HALLO WELT</NavbarText>}
                <NavbarToggler ref={this.togglerRef} onClick={this.toggle}/>
                <Collapse isOpen={!this.state.collapsed} navbar>
                    <NavLinks/>
                    <div className="ms-auto">
                        <LoginLogoutButtons/>
                    </div>
                </Collapse>
            </Navbar>
        );
    }
}

function Navlink(props) {
    return (<NavItem active={true}>
        <NavLink href={props.target}>{props.text}</NavLink>
    </NavItem>);
}

class SmartNavLinks extends React.Component {
    render() {
        return (<Nav navbar className="mr-auto">
            <Navlink target="/create" text="Turnier erstellen"/>
            <Navlink target="/list" text="Öffentliche Turniere"/>
            {this.props.isSignedIn && <Navlink target="/private" text="Private Turniere"/>}
            <Navlink target="/faq" text="FAQ"/>
        </Nav>);
    }
}

class InvisibleLoginLogoutButtons extends React.Component {
    logout() {
        logout(() => notify.show('Du bist jetzt abgemeldet.', 'success', 2500));
    }

    render() {
        const {isSignedIn, username} = this.props;

        if (isSignedIn) {
            return (<ButtonGroup className="nav-item">
                <Button outline color="success" href="/profile"
                        className="navbar-btn my-2 my-sm-0 px-5">{username}</Button>
                <Button outline color="success" onClick={this.logout.bind(this)}
                        className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
            </ButtonGroup>);
        } else {
            return (<ButtonGroup className="nav-item">
                <Button outline color="success" href="/login"
                        className="navbar-btn my-2 my-sm-0 px-5">Login</Button>
            </ButtonGroup>);
        }
    }
}

const mapStateToUserinfo = state => {
    const {isSignedIn, username} = state.userinfo;
    return {isSignedIn, username};
};

const LoginLogoutButtons = connect(mapStateToUserinfo)(InvisibleLoginLogoutButtons);

const NavLinks = connect(mapStateToUserinfo)(SmartNavLinks);