import { RefObject, useRef, useState } 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"
import { calculateRatio } from "../../Utils"

export interface PlayerProps {
    player: Player
    onChange: (p: Player) => void
    onRemove: () => void
    parentRef: RefObject<HTMLDivElement>
}

/**
 * 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,
    parentRef,
}: PlayerProps) {
    const pieceRef = useRef<HTMLDivElement>(null)

    const [x, setX] = useState(player.rightRatio)
    const [y, setY] = useState(player.bottomRatio)

    return (
        <Draggable
            handle={".player-piece"}
            nodeRef={pieceRef}
            bounds="parent"
            position={{ x, y }}
            onStop={() => {
                const pieceBounds = pieceRef.current!.getBoundingClientRect()
                const parentBounds = parentRef.current!.getBoundingClientRect()

                const { x, y } = calculateRatio(pieceBounds, parentBounds)

                setX(x)
                setY(y)

                onChange({
                    rightRatio: x,
                    bottomRatio: y,
                    team: player.team,
                    role: player.role,
                })
            }}>
            <div
                ref={pieceRef}
                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>
    )
}