import React from "react";
import NavLink from "../Link";
import { css } from '@emotion/css';
import Link from './Link';

type NavigationElement = {
    exact?: string
    href: string
    label: string
}

type Subgroup = {
    title: string
    links: NavigationElement[]
}

type Element = {
    label: string
    href?: string
    children?: Element[]
}

export type SidebarProps = {
    header: string
    elements?: Element[]
    groups?: Array<{
        title?: string
        groups: Subgroup[]
        links: Array<NavigationElement>
    }>
}

const Sidebar: React.FC<SidebarProps> = ({ children, header, elements, groups, ...props }) => {
    return (
        <aside className={css({
            gridArea: 'sidebar',
            borderRight: '1px solid #EBECF0',
            backgroundColor: '#f5f6f7',
        })} {...props}>
            <div className={css({
                display: 'block',
                marginBottom: 16
            })}>
                {header && (
                    <div className={css({
                        fontFamily: 'SF UI Text,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol',
                        fontWeight: 500,
                        fontSize: 12,
                        textTransform: 'uppercase',
                        lineHeight: 1.33333,
                        letterSpacing: '1px',
                        color: 'rgb(23, 43, 77)',
                        paddingLeft: 32,
                        display: 'flex',
                        height: 32,
                        alignItems: 'center',
                        ':first-of-type': {
                            marginTop: 32
                        }
                    })}>
                        {header}
                    </div>
                )}
                {!!elements && elements.map(element => {
                    const hasChildren = !!element.children
                    const isLink = !!element.href

                    if (isLink) {
                        return (
                            <Link
                                key={element.href}
                                href={element.href}
                                label={element.label}
                            />
                        )
                    }
                    return null
                })}
                {groups.map((group, index) => (
                    <div
                        key={group.title || group.links[0].label || index}
                        className="NavGroup"
                    >
                        {group.title && (
                            <h1>{group.title}</h1>
                        )}
                        <nav className="NavGroup-nav">
                            {group.groups?.length ? group.groups.map(g => (
                                <div key={g.title}>
                                    <h1>{g.title}</h1>
                                    {g.links.map(l => (
                                        <NavLink key={l.href} href={l.href} linkName={l.label} />
                                    ))}
                                </div>
                            )) : group.links.map(({ label, href },) => (
                                <NavLink key={href} href={href} linkName={label} />
                            ))}
                        </nav>
                    </div>
                ))}
            </div>
        </aside>
    )
}

Sidebar.defaultProps = {
    groups: []
}

export default Sidebar