import { RefObject, useRef, useState } from "react"
import "../../style/player.css"
import RemoveIcon from "../../assets/icon/remove.svg?react"
import BallIcon from "../../assets/icon/ball.svg?react"
import Draggable from "react-draggable"
import { PlayerPiece } from "./PlayerPiece"
import { Player } from "../../tactic/Player"
import { calculateRatio } from "../../Utils"

export interface PlayerProps {
    player: Player
    onChange: (p: Player) => void
    onRemove: () => void
    parentRef: RefObject<HTMLDivElement>
}

/**
 * A player that is placed on the court, which can be selected, and moved in the associated bounds
 * */
export default function CourtPlayer({
                                        player,
                                        onChange,
                                        onRemove,
                                        assignBall,
                                        parentRef,
                                    }: PlayerProps) {
    const pieceRef = useRef<HTMLDivElement>(null)

    const x = player.rightRatio
    const y = player.bottomRatio

    return (
        <Draggable
            handle={".player-piece"}
            nodeRef={pieceRef}
            bounds="parent"
            position={{ x, y }}
            onStop={() => {
                const pieceBounds = pieceRef.current!.getBoundingClientRect()
                const parentBounds = parentRef.current!.getBoundingClientRect()

                const { x, y } = calculateRatio(pieceBounds, parentBounds)

                onChange({
                    rightRatio: x,
                    bottomRatio: y,
                    team: player.team,
                    role: player.role,
                    hasBall: false
                })
            }}>
            <div
                ref={pieceRef}
                className={"player"}
                style={{
                    position: "absolute",
                    left: `${x * 100}%`,
                    top: `${y * 100}%`,
                }}>
                <div
                    tabIndex={0}
                    className="player-content"
                    onKeyUp={(e) => {
                        if (e.key == "Delete") onRemove()
                    }}>
                    <div className="player-selection-tab">
                        <RemoveIcon
                            className="player-selection-tab-remove"
                            onClick={onRemove}
                        />
                    </div>
                    <PlayerPiece team={player.team} text={player.role} />
                </div>
            </div>
        </Draggable>
    )
}