'use client';

import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { useCallback, useRef, useState } from "react";


interface TabListProps {
    tabList: Record<string, React.ReactElement>
}

const TabsComponent = ({ tabList }: TabListProps) => {

    const tabTitles = Object.keys(tabList);
    const tabRefs = useRef<(HTMLButtonElement|null)[]>([]);
    const searchParams = useSearchParams();
    const router = useRouter();
    const pathname = usePathname();

    const tabFormUrl = searchParams.get('tab');
    const initialSelectedTab = tabFormUrl && tabList[tabFormUrl] ? tabFormUrl : tabTitles[0];

    const [selectedTab, setSelectedTab] = useState<string>(initialSelectedTab);
    const [focusedIndex, setfocusedIndex] = useState(tabTitles.indexOf(initialSelectedTab));


    const setParams = useCallback((updates: Record<string, string|null>) => {
        const params = new URLSearchParams(searchParams.toString());

        for( const [key, value] of Object.entries(updates)) {
            if (value === null || value === "") params.delete(key);
            else params.set(key, value);
        }

        const query = params.toString();
        const href = query ? `${pathname}?${query}` : pathname;
        router.replace(href);

    }, [searchParams, pathname, router]);

    const selectTab = (title: string) => {
        setSelectedTab(title);
        setParams({ tab: title });
    }

    const focusTab = (index: number) => {
        const next = (index + tabTitles.length) % tabTitles.length;
        setfocusedIndex(next);
        tabRefs.current[next]?.focus();
    }

    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
        const index = focusedIndex;

        if (e.key === 'ArrowLeft') {
            e.preventDefault();
            focusTab(index - 1);
        } else if (e.key === 'ArrowRight') {
            e.preventDefault();
            focusTab(index + 1);
        } else if (e.key === 'Home') {
            e.preventDefault();
            focusTab(0);
        } else if (e.key === 'End') {
            e.preventDefault();
            focusTab(tabTitles.length - 1);
        } else if(e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            selectTab(tabTitles[index]);
        }
    }


    return (
        <div className="flex flex-col gap-2">
            <div
                role="tablist"
                className="flex flex-row gap-2"
                onKeyDown={(e) => handleKeyDown(e)}
            >
                {tabTitles.map((title, i) => 
                    <button 
                        role="tab"
                        id={`tab-${title}`}
                        aria-selected={title===selectedTab}
                        aria-controls={`panel-${title}`}
                        tabIndex={i === focusedIndex ? 0 : -1}
                        type="button"
                        ref={(el) => { tabRefs.current[i] = el; }}
                        key={title}
                        className={`text-sm font-medium cursor-pointer flex flex-row gap-2 p-2 ${title === selectedTab ? 'border-b-[1.5px] border-foreground/80 ' : ''}`}
                        onClick={() => selectTab(title)}
                        onFocus={() => setfocusedIndex(i)}
                    >
                        {title}
                    </button>
                )}
            </div>
            <div 
                role='tabpanel'
                id={`panel-${selectedTab}`}
                aria-labelledby={`tab-${selectedTab}`}
                className="flex flex-col gap-1 bg-foreground/5 p-4 border border-border rounded-md"
            >
                <div className="font-medium text-foreground">{selectedTab}</div>
                <div className="text-sm text-foreground/80">
                    {tabList[selectedTab]}
                </div>
            </div>
        </div>
    )
}

export default TabsComponent;