import Roact from "@rbxts/roact"
import Padding from "ReplicatedStorage/ui/components/padding"
import Acrylic from "ReplicatedStorage/ui/components/acrylic"
import ToggleButton from "./toggleButton"
import { ContextActionService, HttpService } from "@rbxts/services"
import { Spring } from "@rbxts/flipper"
import { useGroupMotor } from "@rbxts/roact-hooked-plus"
import { useEffect } from "@rbxts/roact-hooked"
import { useRootProducer } from "ReplicatedStorage/ui/store/hooks/useUiProducer"

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 }), new Spring(0, { frequency: 6 })]
const CONFIG_ACTIVE = [new Spring(.5, { frequency: 6 }), new Spring(1, { frequency: 6 })]

function config(props: ConfigProps): Roact.Element {
    const { disableAcrylic, enableAcrylic } = useRootProducer()

    let { shown } = props

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

    const [configPosYAndBorderColor, setConfigGoal] = useGroupMotor([1.5, 6])
    const configPosY = configPosYAndBorderColor.map((t) => t[0])
    const configBorderColor = configPosYAndBorderColor.map((t) => t[1]).map((val) => {
        return Color3.fromHex("#6c7086").Lerp(Color3.fromHex("#b4befe"), val)
    })

    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 (
        <frame
            {...spreadableProps}
            AnchorPoint={new Vector2(.5, .5)}
            Position={
                configPosY.map((posY) => {
                    return new UDim2(.5, 0, posY, 0)
                })
            }
            BackgroundTransparency={1}
            Size={new UDim2(.4, 0, .7, 0)}
            Key={"Config"}
        >
            <Acrylic
                radius={5}
                distance={0.001}
            />
            <frame
                AnchorPoint={new Vector2(0, 0)}
                Position={new UDim2(0, 0, 0, 0)}
                Size={new UDim2(1, 0, 1, 0)}
                BackgroundTransparency={.3}
                BackgroundColor3={Color3.fromHex("#1e1e2e")}
            >
                <uilistlayout
                    Padding={new UDim(0, 5)}
                    VerticalAlignment={Enum.VerticalAlignment.Top}
                    HorizontalAlignment={Enum.HorizontalAlignment.Left}
                    FillDirection={Enum.FillDirection.Vertical}
                />
                <uicorner
                    CornerRadius={new UDim(0, 5)}
                />
                <uistroke
                    Thickness={1}
                    Color={configBorderColor}
                />
                <Padding
                    padding={new UDim(0, 5)}
                />
                <ToggleButton
                    Text="Toggle acrylic UI"
                    active={true}
                    disableCallback={disableAcrylic}
                    enableCallback={enableAcrylic}
                />
            </frame>
        </frame>
    )
}

export default config