import Roact from "@rbxts/roact"
import Slot from "./slot"
import { useWorldContext } from "../contexts/worldContext"
import Padding from "ReplicatedStorage/ui/components/padding"
import { StarterGui } from "@rbxts/services"

interface HotbarProps extends Roact.JsxInstanceProperties<Frame> {
	Event?: Roact.JsxInstanceEvents<Frame>
	Change?: Roact.JsxInstanceChangeEvents<Frame>
}

StarterGui.SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)

function hotbar(props: HotbarProps): Roact.Element {
    const spreadableProps = { ...props } as Partial<HotbarProps>

    const { clientState } = useWorldContext()

    const keycodes: Enum.KeyCode[] = [
        Enum.KeyCode.One,
        Enum.KeyCode.Two,
        Enum.KeyCode.Three,
        Enum.KeyCode.Four,
        Enum.KeyCode.Five,
        Enum.KeyCode.Six,
        Enum.KeyCode.Seven,
        Enum.KeyCode.Eight,
        Enum.KeyCode.Nine
    ]

    const items: Roact.Element[] = []
    clientState.backpack.GetChildren().forEach((tool, i) => {
        items.push(
            <Slot
                Key={`Item${i}`}
                index={i + 1}
                keycode={keycodes[i]}
                tool={tool as Tool}
            />
        )
    })

    return (
        <frame
            {...spreadableProps}
            AnchorPoint={new Vector2(0, 0)}
            Position={new UDim2(0, 0, 0, 0)}
            BackgroundTransparency={1}
            Size={new UDim2(.25, 0, 1, 0)}
            Key={"Hotbar"}
        >
            <uilistlayout
                Padding={new UDim(0, 5)}
                VerticalAlignment={Enum.VerticalAlignment.Bottom}
            />
            <Padding
                padding={new UDim(0, 10)}
            />
            {...items}
        </frame>
    )
}

export default hotbar