import React, { ReactNode, RefObject, useCallback, useEffect } from 'react';
import Container from '../Container';
import { NavigationItem } from '../NavigationItem';

export interface MenuMobileProps {
    items: NavigationItem[];
    className?: string;
    classNameItem?: string;
    closeRef: RefObject<HTMLButtonElement>;
    lastItemRef: RefObject<HTMLAnchorElement>;
    firstItemRef: RefObject<HTMLAnchorElement>;
    open: boolean;
    close: () => void;
    renderWrapper: (children: ReactNode) => ReactNode;
    renderItem: ({
        item,
        close,
        mobile,
        ref
    }: {
        item: NavigationItem;
        close: () => void;
        mobile: boolean;
        ref?: RefObject<HTMLAnchorElement>;
    }) => ReactNode;
}

const MenuMobile = ({
    className,
    open,
    items,
    classNameItem,
    renderItem,
    close,
    renderWrapper,
    lastItemRef,
    closeRef,
    firstItemRef
}: MenuMobileProps) => {
    // Methods.
    const handleOnKeyPress = useCallback(
        (event: KeyboardEvent) => {
            if (lastItemRef.current === event.target && !event.shiftKey && event.key === 'Tab' && open) {
                event.preventDefault();
                return closeRef.current?.focus();
            }

            if (firstItemRef.current === event.target && event.shiftKey && event.key === 'Tab' && open) {
                event.preventDefault();
                return closeRef.current?.focus();
            }

            if (event.key === 'Escape') {
                return close();
            }
        },
        [close, closeRef, firstItemRef, lastItemRef, open]
    );

    useEffect(() => {
        if (!open && document.body.classList.contains('overflow-hidden')) {
            return document.body.classList.remove('overflow-hidden');
        }

        if (open && !document.body.classList.contains('overflow-hidden')) {
            return document.body.classList.add('overflow-hidden');
        }
    }, [open]);

    useEffect(() => {
        window.addEventListener('keydown', handleOnKeyPress);
        return () => window.removeEventListener('keydown', handleOnKeyPress);
    }, [handleOnKeyPress]);

    // Render.
    const itemFirst = items.at(0);
    const itemsFiltered = items.slice(1, -1);
    const itemLast = items.at(-1);

    if (items.length === 0) {
        return null;
    }

    return (
        <>
            {renderWrapper(
                <div className="w-screen">
                    <Container>
                        <ul className="my-8 flex flex-col">
                            <li>{renderItem({ item: itemFirst, close, ref: firstItemRef, mobile: true })}</li>
                            {itemsFiltered.map((item) => (
                                <li key={item.id}>{renderItem({ item, close, mobile: true })}</li>
                            ))}
                            <li>{renderItem({ item: itemLast, close, ref: lastItemRef, mobile: true })}</li>
                        </ul>
                    </Container>
                </div>
            )}
        </>
    );
};

export default MenuMobile;
