import {
    ReactElement,
    ReactNode,
    RefObject,
    useEffect,
    useLayoutEffect,
    useState,
} from "react"
import { Action } from "../../model/tactic/Action"

import { CourtAction } from "../../views/editor/CourtAction"
import { ComponentId, TacticComponent } from "../../model/tactic/Tactic"

export interface BasketCourtProps {
    components: TacticComponent[]
    previewAction: ActionPreview | null

    renderComponent: (comp: TacticComponent) => ReactNode
    renderActions: (comp: TacticComponent) => ReactNode[]

    courtImage: ReactElement
    courtRef: RefObject<HTMLDivElement>
}

export interface ActionPreview extends Action {
    origin: ComponentId
    isInvalid: boolean
}

export function BasketCourt({
    components,
    previewAction,

    renderComponent,
    renderActions,

    courtImage,
    courtRef,
}: BasketCourtProps) {
    return (
        <div
            className="court-container"
            ref={courtRef}
            style={{ position: "relative" }}>
            {courtImage}

            {components.map(renderComponent)}
            {components.flatMap(renderActions)}

            {previewAction && (
                <CourtAction
                    courtRef={courtRef}
                    action={previewAction}
                    origin={previewAction.origin}
                    isInvalid={previewAction.isInvalid}
                    //do nothing on interacted, not really possible as it's a preview arrow
                    onActionDeleted={() => {}}
                    onActionChanges={() => {}}
                />
            )}
        </div>
    )
}