import { useRef } from "react";
import
{
    useFocusable,
    FocusContext,
} from "@noriginmedia/norigin-spatial-navigation";
import { ChevronRight, Joystick } from "lucide-react";
import { GamePadButtonCode, useShortcuts } from "@/mainview/scripts/shortcuts";
import { scrollIntoNearestParent, useDragScroll } from "@/mainview/scripts/utils";
import FocusDots from "../FocusDots";
import { Router } from "@/mainview";
import { StoreEmulatorCard } from "./StoreEmulatorCard";
import { FOCUS_KEYS } from "@/mainview/scripts/types";
import { FrontEndEmulator } from "@/shared/constants";

function SeeAllCard (data: { id: string; onAction: () => void; onFocus?: (details: { node: HTMLElement, instant: boolean; }) => void; })
{
    const { ref, focusKey } = useFocusable({
        focusKey: data.id,
        onFocus: (_l, _p, details) => data.onFocus?.({ node: ref.current, instant: details.instant }),
        onEnterPress: data.onAction
    });
    useShortcuts(focusKey, () => [{ button: GamePadButtonCode.A, label: "See All", action: data.onAction }], []);
    return <div
        ref={ref}
        role="button"
        tabIndex={0}
        onClick={data.onAction}
        className={"flex focusable focusable-info bg-base-100 rounded-4xl transition-shadow focused:animate-scale-small p-4 justify-center items-center min-w-2xs gap-2 hover:bg-base-300 cursor-pointer"}
    >
        See All Emulators <ChevronRight />
    </div>;
}

export function EmulatorsSection (data: {
    id: string;
    emulators: FrontEndEmulator[];
    onSelect?: (id: string, focusKey: string) => void;
    header?: any;
} & FocusParams)
{
    const { ref, focusKey } = useFocusable({
        focusKey: FOCUS_KEYS.EMULATOR_SECTION(data.id),
        trackChildren: true,
        onFocus: (_l, _p, details) => data.onFocus?.(focusKey, ref.current, details)
    });

    const containerRef = useRef(null);
    useDragScroll(containerRef);

    return (
        <FocusContext.Provider value={focusKey}>
            <section ref={ref} className="px-2 py-4">
                <div className="flex items-center gap-3 px-4 mb-4 text-info">
                    {data.header ?? <>
                        <div className="w-2 h-5 rounded-full bg-info shadow-sm shadow-error/40" />
                        <Joystick />
                        <h2 className="font-bold uppercase tracking-widest">
                            Recommended Emulators
                        </h2>
                    </>}
                </div>
                <div ref={containerRef} className="flex *:min-w-[18rem] overflow-y-hidden overflow-x-scroll scrollbar-none py-2 px-4 gap-4 select-none">
                    {data.emulators?.map((em) => (
                        <StoreEmulatorCard id={`${data.id}-${em.name}`} key={em.name} emulator={em} onSelect={(id, focusKey) => data.onSelect?.(em.name, focusKey)} onFocus={({ node, details }) =>
                        {
                            scrollIntoNearestParent(node, { behavior: details.instant ? 'instant' : 'smooth' });
                        }} />
                    ))}
                    <SeeAllCard id={`${FOCUS_KEYS.EMULATOR_SECTION}-see-all`} onAction={() => Router.navigate({ to: '/store/tab/emulators' })} onFocus={({ node, instant }) => scrollIntoNearestParent(node, { behavior: instant ? 'instant' : 'smooth' })} />
                </div>
            </section>
            {!!data.emulators && <FocusDots elements={data.emulators.map(e => FOCUS_KEYS.EMULATOR_CARD(e.name))} />}
        </FocusContext.Provider>
    );
}