import React from 'react'
import { useState } from 'react'
import { Link } from 'react-router-dom'

import '../styles/main.css'
import '../styles/type.css';
import '../styles/navbar.css';
import '../styles/popover.css';

import { useWindowDimensions } from './UseWindowDimensions'

import { Button } from './Button';
import { Popover } from 'react-tiny-popover';
import { Padder } from './Padder';


export const Navbar = ({ logo, title, homeLink, loginLink, signupLink, menu, withAuth, authMenu, user, customElements }) => {

    const { width } = useWindowDimensions()

    const [links, setLinks] = useState(menu.map(link => {
        if (link.hasOwnProperty('subs')) {
            return {
                name: link.name,
                link: link.link,
                subs: link.subs,
                open: false
            }
        } else {
            return link
        }
    }))

    const [authLinks, setAuthLinks] = useState(authMenu.map(link => {
        if (link.hasOwnProperty('subs')) {
            return {
                name: link.name,
                link: link.link,
                subs: link.subs,
                open: false
            }
        } else {
            return link
        }
    }))

    function toggleLink(name) {

        setLinks(links.map(link => {
            if (link.name === name) {
                return {
                    ...link,
                    open: !link.open
                }
            } else {
                return link
            }
        }))
    }

    function toggleAuthLink(name) {

        setAuthLinks(links.map(link => {
            if (link.name === name) {
                return {
                    ...link,
                    open: !link.open
                }
            } else {
                return link
            }
        }))
    }

    return (
        <>
            {
                width > 500 ?
                    // Desktop version.
                    <>
                        {
                            user ?
                                <div className="navbar-desktop sticky-navbar blurred-background">
                                    <div style={{ marginLeft: 36, display: "flex", alignItems: "center" }}>
                                        <div>
                                            {
                                                logo ?
                                                    <Link to={homeLink}>
                                                        <img style={{ height: 38, paddingTop: 10 }} src={logo} />
                                                    </Link>
                                                    :
                                                    <Link to={homeLink} className="navbar-link">
                                                        <h4 className="navbar-link" style={{ margin: 0 }}>{title}</h4>
                                                    </Link>
                                            }
                                        </div>
                                        <div style={{ marginLeft: 72 }}>
                                            {authLinks.map(link => {
                                                if (link.hasOwnProperty('subs')) {
                                                    return (
                                                        <Popover
                                                            isOpen={link.open}
                                                            onClickOutside={() => { toggleAuthLink(link.name) }}
                                                            padding={10}
                                                            align="start"
                                                            positions={['bottom']}
                                                            containerStyle={{ zIndex: 10 }}
                                                            containerClassName="popover"
                                                            content={
                                                                <div style={{ width: '250px' }}>
                                                                    {link.subs.map(sub => {
                                                                        return (
                                                                            <Link to={sub.link} style={{ width: '100%' }}>
                                                                                <Button appearance="minimal" isFullWidth={true} align="start" style={{ marginBottom: 4 }}>{sub.name}</Button>
                                                                            </Link>
                                                                        );
                                                                    })}
                                                                </div>
                                                            }
                                                        >
                                                            <Link to={link.link}>
                                                                <Button appearance="minimal" isActive={link.open} onClick={() => { toggleAuthLink(link.name) }} style={{ marginRight: 8 }}>{link.name}</Button>
                                                            </Link>
                                                        </Popover>
                                                    );
                                                } else {
                                                    return (
                                                        <Link to={link.link}>
                                                            <Button appearance="minimal">{link.name}</Button>
                                                        </Link>
                                                    );
                                                }
                                            })}
                                        </div>
                                    </div>
                                    <div style={{ marginRight: 36 }}>
                                        {/* TODO: Avatar */}
                                    </div>
                                </div>
                                :
                                <div className="navbar-desktop sticky-navbar blurred-background">
                                    <div style={{ marginLeft: 36, display: "flex", alignItems: "center" }}>
                                        <div>
                                            {
                                                logo ?
                                                    <Link to={homeLink}>
                                                        <img style={{ height: 38, paddingTop: 10 }} src={logo} />
                                                    </Link>
                                                    :
                                                    <Link to={homeLink}>
                                                        <h4 className="navbar-link" style={{ margin: 0 }}>{title}</h4>
                                                    </Link>
                                            }
                                        </div>
                                        <div style={{ marginLeft: 72 }}>
                                            {links.map(link => {
                                                if (link.hasOwnProperty('subs')) {
                                                    return (
                                                        <Popover
                                                            isOpen={link.open}
                                                            onClickOutside={() => { toggleLink(link.name) }}
                                                            padding={10}
                                                            align="start"
                                                            positions={['bottom']}
                                                            containerStyle={{ zIndex: 10 }}
                                                            containerClassName="popover"
                                                            content={
                                                                <div style={{ width: '250px' }}>
                                                                    {link.subs.map(sub => {
                                                                        return (
                                                                            <Link to={sub.link} style={{ width: '100%' }}>
                                                                                <Button appearance="minimal" isFullWidth={true} align="start" style={{ marginBottom: 4 }}>{sub.name}</Button>
                                                                            </Link>
                                                                        );
                                                                    })}
                                                                </div>
                                                            }
                                                        >
                                                            <Link to={link.link}>
                                                                <Button appearance="minimal" isActive={link.open} onClick={() => { toggleLink(link.name) }} style={{ marginRight: 8 }}>{link.name}</Button>
                                                            </Link>
                                                        </Popover>
                                                    );
                                                } else {
                                                    return (
                                                        <Link to={link.link}>
                                                            <Button appearance="minimal">{link.name}</Button>
                                                        </Link>
                                                    );
                                                }
                                            })}
                                        </div>
                                    </div>
                                    {withAuth &&
                                        <div style={{ marginRight: 36 }}>
                                            <Link to={loginLink}>
                                                <Button style={{ marginRight: 8 }}>Login</Button>
                                            </Link>
                                            <Link to={signupLink}>
                                                <Button appearance="primary">Sign up</Button>
                                            </Link>
                                        </div>
                                    }
                                    {customElements}
                                </div>
                        }
                    </>
                    :
                    // Mobile version.
                    <>
                        {
                            user ?
                                <div className="">
                                    {/* TODO: Mobile auth navbar content */}
                                </div>
                                :
                                <div className="navbar-mobile">
                                    <Padder bottom="2rem">
                                        {
                                            logo ?
                                                <Link to={homeLink}>
                                                    <img style={{ height: 28, paddingTop: 10 }} src={logo} />
                                                </Link>
                                                :
                                                <Link to={homeLink}>
                                                    <h4 className="navbar-link" style={{ margin: 0 }}>{title}</h4>
                                                </Link>
                                        }
                                    </Padder>
                                    <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                                        <Link to={loginLink}>
                                            <Button style={{ marginRight: 8 }}>Login</Button>
                                        </Link>
                                        <Link to={signupLink}>
                                            <Button appearance="primary">Sign up</Button>
                                        </Link>
                                    </div>
                                </div>
                        }
                    </>
            }
        </>
    );
}

Navbar.defaultProps = {
    homeLink: '/',
    loginLink: '/login',
    signupLink: '/signup',
    menu: [],
    authMenu: [],
    user: null
};
