import { OsuRenderer } from "@/osu/OsuRenderer";
import { Card } from "../components/ui/card";
import { Slider } from "../components/ui/slider";
import { state } from "@/utils";
import { Button } from "../components/ui/button";
import {PauseIcon, PlayIcon} from "lucide-react";
import { Checkbox } from "../components/ui/checkbox"

export function SongSlider() {
    const { beatmap, replay, playing, time, speed} = state();

    if (!beatmap || !replay) {
        return;
    }

    return (
        <Card className="absolute w-[95%] bottom-10 left-1/2 translate-x-[-50%] p-4 flex flex-row items-center justify-between">
            <div className="w-1/4 flex flex-col items-center gap-4">
                {/* Time controls */}
                <div className="flex flex-col items-center w-full ">
                    <p className="text-sm opacity-50">Current time</p>
                    <p>{new Date(time).toISOString().slice(11, 19)}</p>
                </div>
                <div className="flex items-center w-full">
                    <Slider
                        step={10}
                        min={0}
                        max={replay.replay?.length}
                        value={[time]}
                        onValueChange={(value: any) => {
                            OsuRenderer.setTime(value[0]);
                        }}
                        className="flex-grow"
                    />
                    <Button
                        onClick={() => {
                            OsuRenderer.setPlaying(!playing);
                        }}
                        variant="secondary"
                        size="sm"
                        className="ml-2"
                    >
                        {playing ? <PauseIcon/> : <PlayIcon/>}
                    </Button>
                </div>
            </div>

            <div className="w-1/4 flex flex-col items-center gap-4">
                {/* Speed controls */}
                <div className="flex flex-col items-center w-full ">
                    <p className="text-sm opacity-50">Current speed</p>
                    <p>{speed}x</p>
                </div>
                <div className="flex items-center w-full" style={{minHeight: 36}}>
                    <Slider
                        step={0.1}
                        min={0}
                        max={2}
                        value={[speed]}
                        onValueChange={(value: any) => {
                            OsuRenderer.setSpeed(value[0]);
                        }}
                    />
                </div>
            </div>

            <div className="w-1/4 flex flex-col items-center gap-4">
                {/* Checkboxes */}
                <span className="flex items-center space-x-2">
                  <Checkbox checked={OsuRenderer.settings.showKeyPress}
                            id="showKeyPressesCheckbox"
                            onCheckedChange={(e) => {
                                OsuRenderer.settings.showKeyPress = e as boolean;
                            }}
                  ></Checkbox>
                  <label htmlFor="showKeyPressesCheckbox" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                      Show key presses
                  </label>
              </span>

                <span className="flex items-center space-x-2">
                  <Checkbox checked={OsuRenderer.settings.showCursorPath}
                            id="showCursorPathCheckbox"
                            onCheckedChange={(e) => {
                                OsuRenderer.settings.showCursorPath = e as boolean;
                            }}
                  ></Checkbox>
                  <label htmlFor="showCursorPathCheckbox" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                      Show cursor path
                  </label>
              </span>

                <span className="flex items-center space-x-2">
                  <Checkbox checked={OsuRenderer.settings.showFutureCursorPath}
                            id="showFutureCursorPathCheckbox"
                            onCheckedChange={(e) => {
                                OsuRenderer.settings.showFutureCursorPath = e as boolean;
                            }}
                  ></Checkbox>
                  <label htmlFor="showFutureCursorPathCheckbox" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                      Show future cursor path
                  </label>
              </span>
            </div>
        </Card>
    );
}
