import { Atom } from "@rbxts/charm";
import Vide, { Derivable, source } from "@rbxts/vide";

import { NotDerivate, useBox } from "../../../../shared/utils/ui/vide";

/**
 * Props of a toggle.
 */
interface ToggleProps {
    /**
     * A charm atom linked to the toggle.
     */
    Atom?: Atom<boolean>;
    /**
     * The position of the toggle in roblox ui.
     */
    Position?: Derivable<UDim2>;
    /**
     * The size of the toggle
     */
    Size?: Derivable<UDim2>;
}

/**
 * A toggle is a UI component linked to an boolean.
 * @param props Props of the toggle.
 * @returns A Vide node with the toggle.
 */
export function Toggle(props: ToggleProps = {}) {
    const [enable, setEnable] = useBox(props.Atom, false);
    const sphereSize = source(0);
    return (
        <imagebutton
            BackgroundColor3={new Color3(1, 1, 1)}
            MouseButton1Click={() => setEnable(!enable())}
            Position={props?.Position}
            Size={props?.Size ?? UDim2.fromOffset(90, 30)}
        >
            <uicorner CornerRadius={new UDim(1, 0)} />
            <uiaspectratioconstraint AspectRatio={1.8} />
            <frame
                BackgroundColor3={new Color3(0.5, 0.5, 0.5)}
                Position={new UDim2(0, 2, 0, 2)}
                Size={new UDim2(1, -4, 1, -4)}
                Visible={NotDerivate(enable)}
            >
                <uicorner CornerRadius={new UDim(1, 0)} />
            </frame>
            <frame
                AbsoluteSizeChanged={(value) => sphereSize(value.X)}
                BackgroundColor3={new Color3(0, 0, 0)}
                Position={() => (enable() ? new UDim2(1, -sphereSize() - 2, 0, 2) : new UDim2(0, 2, 0, 2))}
                Size={new UDim2(1, -4, 1, -4)}
            >
                <uicorner CornerRadius={new UDim(1, 0)} />
                <uiaspectratioconstraint AspectRatio={1} />
            </frame>
        </imagebutton>
    );
}