import Roact from "@rbxts/roact"
import { ContextActionService, HttpService } from "@rbxts/services"
import { Spring } from "@rbxts/flipper"
import { useEffect } from "@rbxts/roact-hooked"
import Item from "./item"
import Surface from "ReplicatedStorage/ui/components/surface"
import { useMotor } from "@rbxts/pretty-roact-hooks"

interface ConfigProps extends Roact.JsxInstanceProperties<Frame> {
    shown: boolean

	Event?: Roact.JsxInstanceEvents<Frame>
	Change?: Roact.JsxInstanceChangeEvents<Frame>
}

const CONFIG_DEFAULT = new Spring(1.5, { frequency: 6 })
const CONFIG_ACTIVE = new Spring(.5, { frequency: 6 })

function config(props: ConfigProps): Roact.Element {
    let { shown } = props

    const spreadableProps = { ...props } as Partial<ConfigProps>
    delete spreadableProps.shown

    const [configPosY, setConfigGoal] = useMotor(1.5)

    // TODO: maybe opt this into our system for inputs?
    useEffect(() => {
        const guid = HttpService.GenerateGUID(false)
        ContextActionService.BindAction(
            guid,
            (_, userInputState) => {
                if (Enum.UserInputState.Begin === userInputState) {
                    shown = !shown
                    if (shown) {
                        setConfigGoal(CONFIG_ACTIVE)
                    } else {
                        setConfigGoal(CONFIG_DEFAULT)
                    }
                }
            },
            false,
            Enum.KeyCode.P
        )
    })

    return (
        <Surface
            {...spreadableProps}
            anchor={new Vector2(.5, .5)}
            position={
                configPosY.map((posY) => {
                    return new UDim2(.5, 0, posY, 0)
                })
            }
            size={new UDim2(.4, 0, .7, 0)}
            Key={"config"}
        >
            <uilistlayout
                VerticalAlignment={Enum.VerticalAlignment.Top}
                FillDirection={Enum.FillDirection.Vertical}
            />
            <uipadding
                PaddingTop={new UDim(0, 5)}
                PaddingRight={new UDim(0, 5)}
                PaddingBottom={new UDim(0, 5)}
                PaddingLeft={new UDim(0, 5)}
            />
            <Item
                size={new UDim2(1, 0, .1, 0)}
                position={new UDim2()}
                text="Toggle Acrylic UI"
                action="acrylicBlur"
            />
        </Surface>
    )
}

export default config