import Container from '../Container';
import React, { ReactNode, RefObject, useRef } from 'react';
import { classNamesTailwind } from '../../utils/theme';
import Menu from '../Menu';
import MenuMobile from '../MenuMobile';

export interface NavigationItem {
    id: number | string;
    title: string;
    path?: string;
    external: boolean;
    bold?: boolean;
    [key: string]: any;
    items?: NavigationItem[];
}

export interface HeaderProps {
    open: boolean;
    close: () => void;
    navigation: NavigationItem[];
    renderLogo: (firstItemRef: RefObject<HTMLAnchorElement>, close: () => void) => ReactNode;
    renderToggle: ({ ref, open }: { ref: RefObject<HTMLButtonElement>; close: () => void; open: boolean }) => ReactNode;
    renderMenuItem: ({
        item,
        close,
        mobile,
        ref
    }: {
        item: NavigationItem;
        close: () => void;
        mobile: boolean;
        ref?: RefObject<HTMLAnchorElement>;
    }) => ReactNode;
    renderMenu?: ({ navigation, close }: { navigation: NavigationItem[]; close: () => void }) => ReactNode;
    renderMobileMenu?: (
        navigation: NavigationItem[],
        close: () => void,
        open: boolean,
        firstItemRef: RefObject<HTMLAnchorElement>,
        closeRef: RefObject<HTMLButtonElement>,
        lastItemRef: RefObject<HTMLAnchorElement>
    ) => ReactNode;
    renderMobileMenuWrapper: (children: ReactNode) => ReactNode;
    skipContentLabel?: string;
    // ClassNames.
    classNameHeader?: string;
    className?: string;
    classNameSkipContent?: string;
    classNameMenu?: string;
    classNameMenuItem?: string;
}

const Header = ({
    open,
    close,
    renderLogo,
    renderToggle,
    renderMenuItem,
    renderMenu,
    renderMobileMenu,
    renderMobileMenuWrapper,
    navigation,
    classNameHeader,
    classNameMenu,
    classNameMenuItem,
    className
}: HeaderProps) => {
    const toggleRef = useRef<HTMLButtonElement>(null);
    const lastItemRef = useRef<HTMLAnchorElement>(null);
    const firstItemRef = useRef<HTMLAnchorElement>(null);

    return (
        <header className={classNamesTailwind('z-50', classNameHeader)}>
            <div className={classNamesTailwind('w-full bg-white shadow-sm relative z-20', className)}>
                <Container>
                    <div className="flex items-center justify-between h-[5rem]">
                        {renderLogo(firstItemRef, close)}
                        {renderToggle({ ref: toggleRef, close, open })}
                        {renderMenu ? (
                            renderMenu({ navigation, close })
                        ) : (
                            <Menu
                                close={close}
                                className={classNameMenu}
                                classNameItem={classNameMenuItem}
                                renderItem={renderMenuItem}
                                items={navigation}
                            />
                        )}
                    </div>
                </Container>
            </div>
            {renderMobileMenu ? (
                renderMobileMenu(navigation, close, open, firstItemRef, toggleRef, lastItemRef)
            ) : (
                <MenuMobile
                    renderWrapper={renderMobileMenuWrapper}
                    renderItem={renderMenuItem}
                    closeRef={toggleRef}
                    firstItemRef={firstItemRef}
                    lastItemRef={lastItemRef}
                    items={navigation}
                    open={open}
                    close={close}
                />
            )}
        </header>
    );
};

export interface HeaderWrapperProps extends HeaderProps {}

const HeaderWrapper = (props: HeaderWrapperProps) => {
    // Render.
    return (
        <>
            <a
                className={classNamesTailwind(
                    'p sr-only !mb-0 px-4 !leading-10 hover:underline focus:not-sr-only',
                    props.classNameSkipContent
                )}
                href="#main"
            >
                {props.skipContentLabel ?? 'Overslaan en naar de inhoud gaan'}
            </a>
            <Header {...props} />
        </>
    );
};

export default HeaderWrapper;
