import { Slider, Label, Typography, Input } from "@heroui/react";
import {
    useEffect,
    type ChangeEvent,
    type Dispatch,
    type SetStateAction,
} from "react";
import { AgentInfo, WeaponInfo } from "~/types/skin";

export function Float({
    skin,
    setSkin,
    acceptInput = false,
    hasLabel = false,
}: {
    skin: WeaponInfo;
    setSkin: Dispatch<SetStateAction<WeaponInfo | AgentInfo>>;
    minFloat?: number;
    maxFloat?: number;
    acceptInput?: boolean;
    hasLabel?: boolean;
}) {
    useEffect(() => {
        const newSkin = new WeaponInfo(skin);
        newSkin.float = Math.max(
            skin.min_float,
            Math.min(skin.max_float, skin.float),
        );
        setSkin(newSkin);
    }, [skin.min_float, skin.max_float]);

    const handleChange = (newValue: number | number[]) => {
        const val = Array.isArray(newValue) ? newValue[0] : newValue;
        const newSkin = new WeaponInfo(skin);
        newSkin.float = Math.max(skin.min_float, Math.min(skin.max_float, val));
        setSkin(newSkin);
    };

    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
        const val = event.currentTarget.valueAsNumber;
        const newSkin = new WeaponInfo(skin);
        newSkin.float = Math.max(skin.min_float, Math.min(skin.max_float, val));
        setSkin(newSkin);
    };

    return (
        <>
            {hasLabel && (
                <div className="flex items-center gap-2">
                    <Typography.Paragraph>Float</Typography.Paragraph>
                    <Input
                        className="flex-1"
                        id="float"
                        type="number"
                        step={0.0001}
                        value={skin.float}
                        onChange={handleInputChange}
                    />
                </div>
            )}
            <Slider
                value={skin.float}
                maxValue={1}
                step={0.0001}
                onChange={handleChange}
            >
                <Slider.Track
                    className="border-0 h-2 rounded-xl"
                    style={{
                        background:
                            "linear-gradient(90deg, var(--color-green-800) 7%, var(--color-green-500) 7%, var(--color-green-500) 15%, var(--color-lime-400) 15%, var(--color-lime-400) 38%, var(--color-orange-400) 38%, var(--color-orange-400) 38%, var(--color-orange-400) 45%, var(--color-red-400) 45%",
                    }}
                >
                    <div
                        className="h-full rounded-xl"
                        style={{
                            background: `linear-gradient(90deg, rgba(0, 0, 0, 0.8) ${skin.min_float * 100}%, transparent ${skin.min_float * 100}%, transparent ${skin.max_float * 100}%, rgba(0, 0, 0, 0.8) ${skin.max_float * 100}%)`,
                        }}
                    />
                    <Slider.Thumb className="w-1" isDisabled={!acceptInput} />
                </Slider.Track>
            </Slider>
        </>
    );
}