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 "../../tactic/Player";

export interface PlayerProps {
    player: Player,
    onChange: (p: Player) => void,
    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, onChange,  onRemove}: PlayerProps) {

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

    return (
        <Draggable
            handle={".player-piece"}
            bounds="parent"
            defaultPosition={{x, y}}
            onStop={() => onChange({
                id: player.id,
                rightRatio: player.rightRatio,
                bottomRatio: player.bottomRatio,
                team: player.team,
                role: player.role
            })}
        >
            <div 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>
    )
}