import {useRef} from "react";
import "../../style/player.css";
import RemoveIcon from "../../assets/icon/remove.svg";
import Draggable, {DraggableBounds} from "react-draggable";
import {PlayerPiece} from "./PlayerPiece";

export interface PlayerProps {
    pos: string,
    team: string,
    x: number,
    y: number,
    bounds: DraggableBounds,
    onRemove: () => void
}

/**
 * A player that is placed on the court, which can be selected, and moved in the associated bounds
 * */
export default function CourtPlayer({pos, team, x, y, bounds, onRemove}: PlayerProps) {

    const ref = useRef<HTMLDivElement>(null);
    return (
        <Draggable
            handle={".player-piece"}
            nodeRef={ref}
            bounds={bounds}
            defaultPosition={{x, y}}
        >
            <div ref={ref}
                 className={"player"}
                 style={{
                     position: "absolute",
                 }}>

                <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={team} text={pos}/>
                </div>
            </div>

        </Draggable>

    )
}