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>

    )
}