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

export interface PlayerOptions {
    id: number,
    x: number,
    y: number,
    bounds: DraggableBounds,
    onRemove: () => void
}

export default function Player({id, x, y, bounds, onRemove}: PlayerOptions) {

    const ref = useRef<HTMLDivElement>(null);
    return (
        <Draggable
            handle={".player-piece"}
            nodeRef={ref}
            bounds={bounds}
            defaultPosition={{x: x, y: 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>
                    <div
                         className="player-piece">
                        <p>{id}</p>
                    </div>
                </div>
            </div>

        </Draggable>

    )
}