import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Pause, Play } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useSlider } from "../../hooks/useSlider";
import { Slider } from "../slider";
import "./styles.css";
/**
 * AudioPlayer component
 *
 * A customizable audio player with play/pause controls, progress slider, and time display.
 * Provides callbacks for play and pause events with detailed audio information.
 *
 * @component
 *
 * @param {AudioPlayerProps} props - The component props
 *
 * @returns {JSX.Element} The rendered audio player component
 *
 * @requires lucide-react - For Play and Pause icons
 * @requires useSlider - For slider state management
 * @requires slider - For the progress slider component
 *
 * @example
 * // Basic usage
 * <AudioPlayer src="https://example.com/audio.mp3" />
 *
 * @example
 * // With callbacks
 * <AudioPlayer
 *   src="https://example.com/audio.mp3"
 *   onPlayAudio={(info) => console.log('Playing:', info.formattedCurrentTime)}
 *   onPauseAudio={(info) => console.log('Paused at:', info.formattedCurrentTime)}
 * />
 */
function AudioPlayer(props) {
    const { onPlayAudio, onPauseAudio, disabled, ...rest } = props;
    const [sliderValue, setSliderValue] = useSlider(0);
    const [isPlaying, setIsPlaying] = useState(false);
    const [isDragging, setIsDragging] = useState(false);
    const audioReference = useRef(null);
    const currentTime = audioReference.current?.currentTime;
    const totalTime = audioReference.current?.duration;
    const formattedCurrentTime = formatTime(currentTime);
    const formattedTotalTime = formatTime(totalTime);
    const audioInformation = {
        totalTime,
        currentTime,
        formattedCurrentTime,
        formattedTotalTime,
    };
    function formatTime(time) {
        if (!time)
            return "00:00";
        const minutes = Math.floor(time / 60);
        const seconds = Math.floor(time % 60);
        const formattedMinutes = String(minutes).padStart(2, "0");
        const formattedSeconds = String(seconds).padStart(2, "0");
        return `${formattedMinutes}:${formattedSeconds}`;
    }
    function handlePlayAudio() {
        const audioElement = audioReference.current;
        if (!audioElement)
            return;
        if (props.onPlayAudio)
            props.onPlayAudio(audioInformation);
        audioElement.play();
        setIsPlaying(true);
    }
    function handlePauseAudio() {
        const audioElement = audioReference.current;
        if (!audioElement)
            return;
        if (props.onPauseAudio)
            props.onPauseAudio(audioInformation);
        audioElement.pause();
        setIsPlaying(false);
    }
    function handleToggleAudio() {
        if (isPlaying)
            handlePauseAudio();
        else
            handlePlayAudio();
    }
    function handleSliderChange(value) {
        const audioElement = audioReference.current;
        if (!audioElement)
            return;
        const totalTime = audioElement.duration;
        const currentTime = (value / 100) * totalTime;
        audioElement.currentTime = currentTime;
    }
    if (isDragging || !isPlaying) {
        audioReference.current?.pause();
    }
    else if (isPlaying) {
        audioReference.current?.play();
    }
    useEffect(() => {
        const audioElement = audioReference.current;
        if (!audioElement)
            return;
        const handleTimeUpdate = () => {
            const totalTime = audioElement.duration;
            const currentTime = audioElement.currentTime;
            const value = (currentTime / totalTime) * 100;
            setSliderValue(value);
        };
        audioElement.addEventListener("timeupdate", handleTimeUpdate);
        return () => {
            audioElement.removeEventListener("timeupdate", handleTimeUpdate);
        };
    }, []);
    return (_jsxs("div", { className: "arkynAudioPlayer", children: [_jsx("audio", { ...rest, ref: audioReference, src: props.src, onEnded: handlePauseAudio }), _jsxs("button", { type: "button", disabled: disabled, onClick: handleToggleAudio, children: [isPlaying && _jsx(Pause, {}), !isPlaying && _jsx(Play, {})] }), _jsx("p", { children: formattedCurrentTime }), _jsx(Slider, { value: sliderValue, onChange: handleSliderChange, onDragging: setIsDragging, disabled: disabled }), _jsx("p", { children: formattedTotalTime })] }));
}
export { AudioPlayer };
