import Roact from "@rbxts/roact"
import Canvas from "./canvas"
import Acrylic from "./acrylic"
import Fill from "./fill"
import { BindingOrValue } from "ReplicatedStorage/utils/bindingUtil"

interface surfaceProps extends Roact.JsxInstanceProperties<Frame> {
	size: BindingOrValue<UDim2>
    position: BindingOrValue<UDim2>
    ratio?: BindingOrValue<number>
    color?: BindingOrValue<Color3>
    anchor?: Vector2
    [Roact.Children]?: Roact.Children

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

function surface(props: surfaceProps): Roact.Element {
    const { size, position, ratio, color, anchor } = props

	const spreadableProps = { ...props } as Partial<surfaceProps>
    delete spreadableProps.size
    delete spreadableProps.position
    delete spreadableProps.ratio
    delete spreadableProps.color
    delete spreadableProps.anchor
	delete spreadableProps[Roact.Children]

	return (
		<Canvas
            {...spreadableProps}
            Key={"surface container"}
            size={size}
            position={position}
            anchor={anchor}
        >
            <>
                {
                    ratio !== undefined && <uiaspectratioconstraint AspectRatio={ratio}/>
                }
            </>

            <Acrylic
                Key={"acrylic"}
                radius={5}
                distance={0.001}
            />

            <Fill
                color={color ? color : Color3.fromHex("#1e1e2e")}
                transparency={.3}
                radius={5}
            />

            <Canvas
                Key={"inner content"}
            >
                {props[Roact.Children]}
            </Canvas>
        </Canvas>
	)
}

export default surface