import React, { Component } from 'react'
import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'
import NavDropdown from 'react-bootstrap/NavDropdown'
import {NavLink} from 'react-router-dom'
import Session from '../session/session-container'
import {LinkContainer} from 'react-router-bootstrap'
import { AiOutlineShoppingCart } from 'react-icons/ai'
import AnimateOnChange from 'react-animate-on-change'
import { GoogleLogout } from 'react-google-login';
import './header.css';

const clientId = `${process.env.REACT_APP_GOOGLE_CLIENT_ID}.apps.googleusercontent.com`;

export default class Header extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isLoggedIn: true
        }

        this.logOutSuccess = this.logOutSuccess.bind(this);
        this.toggleLoggedIn = this.toggleLoggedIn.bind(this);
    }

    toggleLoggedIn() {
        const prevState = this.state.isLoggedIn;
        this.setState({ isLoggedIn: !prevState })
    }

    logOutSuccess = (response) => {
        this.props.logOut()
        this.props.clearCart()
        this.toggleLoggedIn()
    }

    render() {
        let userName
        if (!!this.props.user?.currentUser){
            userName = this.props.user.currentUser.firstName
        } else{
            userName = "Guest"
        }

        return (
            <div>
                <Navbar id="header-nav" collapseOnSelect expand="sm" bg="light">
                    <LinkContainer to="/product-market" >
                        <Navbar.Brand>Ascend</Navbar.Brand>
                    </LinkContainer>
                    <div id="ecom-title">Ecommerce</div>
                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav className="ms-auto">
                            {!this.props.user?.currentUser ? 
                                <Navbar.Text className="nav-bar-text-default" id="white-color">Hello Guest</Navbar.Text> :
                                <NavDropdown 
                                    className="nav-bar-text"
                                    title={ 
                                        <div>
                                            <img id="user-image" src={ this.props.image } />
                                            Hello {userName}
                                        </div>
                                    }
                                    id="collasible-nav-dropdown"
                                >
                                    <NavDropdown.Item ><NavLink to="/orders">Order History</NavLink></NavDropdown.Item>
                                    <NavDropdown.Item>
                                        <GoogleLogout
                                            clientId={clientId}
                                            buttonText="Logout"
                                            onLogoutSuccess={this.logOutSuccess}
                                            render={props => (<div onClick={props.onClick}>Logout</div>)}
                                        >
                                        </GoogleLogout>
                                    </NavDropdown.Item>
                                </NavDropdown>
                            }
                            {
                                this.state.isLoggedIn ? 
                                <Session className="nav-bar-text" toggleLoggedIn={ this.toggleLoggedIn } />
                                :
                                ""
                            }
                            <LinkContainer to="/cart" >
                                <Nav.Link to="/cart" className="cart-link" id={this.props.user?.currentUser ? "" : "disabled-cart-link"} disabled={ !this.props.user?.currentUser }>
                                    <AiOutlineShoppingCart fill="#EBEBEB" size={30} />
                                </Nav.Link>
                            </LinkContainer>
                            <AnimateOnChange
                                baseClassName="items-in-cart"
                                animationClassName="items-in-cart-animation"
                                animate={ this.props.diff != 0 }
                            >
                                <LinkContainer to="/cart" >
                                    <Nav.Link to="/cart" className={ this.props.cartLength > 0 ? "items-in-cart" : "no-show" }>{ this.props.cartLength }</Nav.Link>
                                </LinkContainer>
                            </AnimateOnChange>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </div>
        )
    }
}