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

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

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

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

    courtImage: ReactElement
    courtRef: RefObject<HTMLDivElement>
}

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

export function BasketCourt({
    components,
    parentComponents,
    previewAction,

    renderComponent,
    renderActions,

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

            {courtRef.current &&
                parentComponents?.map((i) => renderComponent(i, true))}
            {courtRef.current &&
                parentComponents?.flatMap((i) => renderActions(i, true))}

            {courtRef.current &&
                components.map((i) => renderComponent(i, false))}
            {courtRef.current &&
                components.flatMap((i) => renderActions(i, false))}

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