import { useRef } from "react"
import "../../style/player.css"
import RemoveIcon from "../../assets/icon/remove.svg?react"
import Draggable from "react-draggable"
import { PlayerPiece } from "./PlayerPiece"
import { Player } from "../../data/Player"

export interface PlayerProps {
    player: Player
    onRemove: () => void
}

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

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

    return (
        <Draggable handle={".player-piece"} nodeRef={ref} bounds="parent">
            <div
                ref={ref}
                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>
    )
}