{{--

WARNING!!!
This component is shared with Podcast episodes AND audio items! Keep this component as generic as possible!

--}}


@props([
    'audioSrc',
    'title',
    'artwork',
    'currentUrl' => false,
])

<div
    x-data="{
        src: @js($audioSrc),
        state: 'paused', // paused or playing
        autoPlay: true,
        isLoading: true,
        showLoading: false,
        canUpdateStartTimer: true,
        startTime: @entangle('startTimeSeconds'),
        currentTime: 0,
        oldCurrentTime: 0,
        min: 0,
        max: 100,
        consideredCompleteSeconds: 10,
        updateIntervalSeconds: 2,
        mouse: false,

        init() {
            {{-- Not sure I need these - test slow network, next. prev slow fast clicking, offline --}}
            this.oldCurrentTime = 0;
            this.currentTime = 0;
            this.max = 100;

            {{-- Ensure player does not autoplay if openAccess is required --}}
            if(!this.isOpenAccess()) this.autoPlay = false;

            {{-- Delay loading visual state --}}
            this.$watch('isLoading', (isLoading, oldValue)=>{
                clearTimeout(this.timer);
                if(isLoading) {
                    clearTimeout(this.timer);
                    this.timer = setTimeout(()=>this.showLoading = true, 2000);
                } else {
                    this.showLoading = false;
                }
            });

            window.onpopstate = (event) => document.location = event.target.location;

            {{-- next or previous track button clicked --}}
            if(window.myAudio) {
                window.history.pushState(null, null, @js($currentUrl));

                if(this.src !== '') {
                    window.myAudio.src = this.src;
                    window.myAudio.load();
                }
            }

            {{-- Fresh page loaded --}}
            if(!window.myAudio) {
                window.myAudio = new Audio(this.src);

                this.anchorConfirmationModalHandler = this.anchorConfirmationModal.bind(this);
                this.listeners();
            }

            if(this.src === '') {
                this.state = 'paused';
            }

            if ('mediaSession' in navigator) {
                navigator.mediaSession.metadata = new MediaMetadata({
                    title: @js($title),
                    {{-- artist: 'Rick Astley',--}}
                    {{-- album: 'Whenever You Need Somebody',--}}
                    artwork: [{ src: @js($artwork) }]
                });

                const actionHandlers = [
                    ['play',          () => { this.play() }],
                    ['pause',         () => { this.pause() }],
                    ['previoustrack', () => { this.previous() }],
                    ['nexttrack',     () => { this.next() }],
                    ['seekbackward',  (details) => { this.rewind() }],
                    ['seekforward',   (details) => { this.fastforward() }],
                ];

                for (const [action, handler] of actionHandlers) {
                    try {
                        navigator.mediaSession.setActionHandler(action, handler);
                    } catch (error) {
                        this.log(`The media session action '${action}' is not supported yet.`);
                    }
                }
            }
        },

        listeners() {
            window.myAudio.addEventListener('error', (err) => {
                this.startTime = this.currentTime ?? 0;

                this.log('error',err, window.myAudio.error);
                {{-- If we ever wanted to show error messages: https://gist.github.com/wilmoore/3252894 --}}

                clearTimeout(this.interval);
                this.interval = setInterval(()=>{
                    if(navigator.onLine) {
                        this.log('Online');
                        this.log('re-loading');
                        window.myAudio.load();
                        window.myAudio.currentTime = this.currentTime;
                        clearTimeout(this.interval);
                    }else {
                        this.log('Not online');
                    }
                }, 3000)
            });

            window.myAudio.addEventListener('loadeddata', () => {
                this.log('loadeddata');
                this.max = window.myAudio.duration;

                {{-- Set Start Time --}}
                window.myAudio.currentTime = this.startTime;
                this.currentTime = this.startTime;
                this.oldCurrentTime = this.startTime;

                {{-- If user is at end of track then restart --}}
                {{-- // todo: replace with complete value --}}
                if((this.startTime) >= (window.myAudio.duration - this.consideredCompleteSeconds)){
                    window.myAudio.currentTime = 0;
                    this.oldCurrentTime = 0;
                }
            });

            window.myAudio.addEventListener('timeupdate', () => {
                this.log('timeupdate', window.myAudio.currentTime, this.canUpdateStartTimer, Math.abs(this.oldCurrentTime - window.myAudio.currentTime) >= this.updateIntervalSeconds);

                if(!this.mouse) {
                    this.currentTime = window.myAudio.currentTime;
                }

                {{-- Update user progress every 10seconds --}}
                if(
                    !this.isLoading
                    && this.canUpdateStartTimer
                    && @js(auth()->check())
                    && Math.abs(this.oldCurrentTime - window.myAudio.currentTime) >= this.updateIntervalSeconds
                ) {
                    this.log(this.oldCurrentTime, window.myAudio.currentTime);
                    this.oldCurrentTime = Math.round(window.myAudio.currentTime);
                    $wire.call('updateListenableProgress', this.currentTime, Math.round(window.myAudio.duration - this.currentTime));
                }
            });

            window.myAudio.addEventListener('canplay', () => {
                this.log('canplay', this.state, this.autoPlay);
                this.isLoading = false;

                {{-- If user has click next or previous and the state was playing then continue playing  --}}
                if(this.autoPlay) {
                    console.log('autoPlay',this.startTime, this.currentTime);
                    this.play();
                    this.autoPlay = false;
                }
            });

            window.myAudio.addEventListener('ended', () => {
                this.log('ended');
                $wire.call('updateListenableProgress', this.max, 0);

                @if($this->hasNextTrack)
                    this.autoPlay = true;
                    this.next();
                @endif
            });

            window.myAudio.addEventListener('pause', ()=> {
                this.log('paused');
                this.state = 'paused';
            });

            window.myAudio.addEventListener('play', ()=> {
                this.log('play');
                this.state = 'playing';
            });

            window.myAudio.addEventListener('playing', ()=> {
                this.log('playing');
                this.state = 'playing';
                this.isLoading = false;
            });

            window.myAudio.addEventListener('seeking', ()=> {
                this.log('seeking');
            });

            window.myAudio.addEventListener('waiting', ()=> {
                this.log('waiting');
                this.isLoading = true;
            });

            window.myAudio.addEventListener('suspend', (data)=> {
                this.log('suspend');
                this.isLoading = false;
            });

            window.myAudio.addEventListener('stalled', ()=> {
                this.log('stalled');
                this.isLoading = true;
            });

            window.myAudio.addEventListener('emptied', ()=> {
                this.log('emptied', this.state, this.autoPlay);
                this.isLoading = true;

                {{-- The user clicked next or previous or the player errored out. We will save the state so we can pick it up later  --}}
                if(this.state === 'playing') {
                    this.autoPlay = true;
                }
            });

            document.body.removeEventListener('click', this.anchorConfirmationModalHandler);
            document.body.addEventListener('click', this.anchorConfirmationModalHandler);
        },

        anchorConfirmationModal(e) {
            window.anchorConfirmationModal(e, this.state === 'playing');
        },

        isOpenAccess() {
            if(!!@js($this->canAccess) === true) return true;

            this.state = 'paused';
            this.$dispatch('showsignupmodal');
            return false;
        },

        onSeek() {
            if(!this.mouse) return;
            this.mouse = false;
            window.myAudio.currentTime = this.currentTime;
        },

        play() {
            if(!this.isOpenAccess()) return;
            window.myAudio.play();
        },

        pause() {
            if(!this.isOpenAccess()) return;
            window.myAudio.pause();

            console.dir(window.myAudio);
        },

        previous() {
            this.isLoading = true;
            $wire.call('previousTrack');
        },

        next() {
            this.isLoading = true;
            $wire.call('nextTrack');
        },

        rewind() {
            if(!this.isOpenAccess()) return;

            let newValue = ~~this.currentTime - 15;
            if(newValue < this.min) newValue = this.min;
            window.myAudio.currentTime = newValue;

            {{-- debounce to avoid sending updates to the server if the user spams the button --}}
            this.canUpdateStartTimer = false;
            clearTimeout(this.timer3);
            this.timer3 = setTimeout(()=>this.canUpdateStartTimer = true, 1000);
        },

        fastforward() {
            if(!this.isOpenAccess()) return;

            let newValue = ~~this.currentTime + 15;
            if(newValue > this.max) newValue = this.max;
            window.myAudio.currentTime = newValue;

            {{-- debounce to avoid sending updates to the server if the user spams the button --}}
            this.canUpdateStartTimer = false;
            clearTimeout(this.timer3);
            this.timer3 = setTimeout(()=>this.canUpdateStartTimer = true, 1000);
        },

        get timeRemaining() {
            if(this.currentTime===0)return '00:00';
            let seconds = this.max - this.currentTime;

            let days, hours, minutes;

            // order is important here:
            minutes = Math.floor(seconds / 60);
            seconds = Math.floor(seconds % 60);
            hours   = Math.floor(minutes / 60);
            minutes = minutes % 60;
            days    = Math.floor(hours / 24);
            hours   = hours % 24;
            hours  += days * 24;

            if(hours === 0) return `${this.pad(minutes)}:${this.pad(seconds)}`;
            return `${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}`;
        },

        get timeUsed() {
            if(this.currentTime===0)return '00:00';
            let seconds = this.currentTime;

            let days, hours, minutes;

            // order is important here:
            minutes = Math.floor(seconds / 60);
            seconds = Math.floor(seconds % 60);
            hours   = Math.floor(minutes / 60);
            minutes = minutes % 60;
            days    = Math.floor(hours / 24);
            hours   = hours % 24;
            hours  += days * 24;

            if(hours === 0) return `${this.pad(minutes)}:${this.pad(seconds)}`;
            return `${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}`;
        },

        pad(num, size = 2) {
            var s = String(num);
            while (s.length < (size)) {s = '0' + s;}
            return s;
        },

        map(value, inMin, inMax, outMin, outMax) {
            return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
        },

        log(...args) {
            @if(config('app.env') === 'local')
                console.log(...args);
            @endif
        }
    }"
>
    <x-modals.modal-confirmation />
    <div class="mx-auto text-white max-w-xl space-y-8">
        <div>

            <div class="relative">
                <div class="bg-grey-450 w-ful h-[5px] overflow-hidden">
                    <div
                        class="bg-pink-light h-full"
                        style="width:0"
                        :style="{'width': map(currentTime, min, max, 0, 100) + '%' }"
                    ></div>
                </div>

                <input
                    x-cloak
                    x-ref="progress"
                    x-model="currentTime"
                    @touchstart="mouse = true"
                    @mousedown="mouse = true"
                    @touchend="onSeek()"
                    @mouseup.window="onSeek()"
                    :min="min"
                    :max="max"
                    class="form-player-range absolute inset-0"
                    type="range"
                />
            </div>

            <div class="flex justify-between items-end text-grey-450 pt-1">
                <div class="text-sm font-semibold" x-text="timeUsed">00:00</div>
                <div class="text-sm font-semibold" x-text="timeRemaining">00:00</div>
            </div>
        </div>

        <div>
            <div class="flex justify-center items-center gap-0 sm:gap-8 -mt-4">
                <button
                    @click="previous"
                    {{ ($this->hasPreviousTrack?'':'disabled="disabled"') }}
                    class="btn btn-on-dark !p-2 relative rounded-full"
                >
                    <x-icon name="previous" size="1.5rem" />
                </button>

                <button
                    @click="rewind"
                    :disabled="currentTime==0"
                    :class="{'group': currentTime!==min}"
                    class="btn btn-on-dark !p-1 relative rounded-full"
                >
                    <div class="text-white transition group-active:-rotate-45">
                        <x-icon name="rewind" size="3.5rem" />
                    </div>
                    <div class="absolute inset-0 flex items-center justify-center text-lg font-semibold">15</div>
                </button>


                <button
                    class="btn btn-on-dark bg-pink-light rounded-full w-14 h-14 sm:w-20 sm:h-20 relative mx-3"
                >
                    <span
                        @click="play"
                        x-show="state==='paused' && !showLoading"
                        x-cloak x-transition.duration.150ms
                        class="absolute inset-0"
                    >
                        <x-icon name="play" size="100%" class="text-black absolute inset-0 p-4" />
                    </span>

                    <span
                        @click="pause"
                        x-show="state==='playing' && !showLoading"
                        x-cloak x-transition.duration.150ms
                        class="absolute inset-0"
                    >
                        <x-icon name="pause" size="100%" class="text-black absolute inset-0 p-4" />
                    </span>

                    <span
                        @click="play"
                        x-show="showLoading"
                        x-cloak x-transition.duration.150ms
                        class="absolute inset-0"
                    >
                        <x-icon name="grid" size="100%" class="animate-spin text-black absolute inset-0 p-4" />
                    </span>
                </button>

                <button
                    @click="fastforward"
                    :disabled="currentTime==max"
                    :class="{'group': currentTime!==max}"
                    class="btn btn-on-dark !p-1 relative rounded-full"
                >
                    <div class="text-white transition group-active:rotate-45">
                        <x-icon name="fastforward" size="3.5rem" />
                    </div>
                    <div class="absolute inset-0 flex items-center justify-center text-lg font-semibold">15</div>
                </button>

                <button
                    @click="next"
                    {{ ($this->hasNextTrack?'':'disabled="disabled"') }}
                    class="btn btn-on-dark !p-2 relative rounded-full text-white"
                >
                    <x-icon name="next" size="1.5rem" />
                </button>
            </div>
        </div>
    </div>
</div>