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

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

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

    renderComponent: (comp: TacticComponent) => ReactNode
    renderAction: (action: Action, idx: number) => ReactNode

    courtImage: ReactElement
    courtRef: RefObject<HTMLDivElement>
}

export function BasketCourt({
    components,
    actions,
    previewAction,

    renderComponent,
    renderAction,

    courtImage,
    courtRef,
}: BasketCourtProps) {
    const [internActions, setInternActions] = useState<Action[]>([])

    useLayoutEffect(() => setInternActions(actions), [actions])

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

            {components.map(renderComponent)}

            {internActions.map((action, idx) => renderAction(action, idx))}

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