Application-Web/src/components/editor/BasketCourt.tsx

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

import {CourtAction} from "./CourtAction.tsx"
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) {

    const [forceEmptyComponents, setForceEmptyComponents] = useState(true)

    useLayoutEffect(() => {
        setForceEmptyComponents(false)
    }, [setForceEmptyComponents]);

    const usedComponents = forceEmptyComponents ? [] : components

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

            {usedComponents.map(renderComponent)}
            {usedComponents.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>
    )
}