@props([
    'liveurl' => '',
    'programmes' => [],
    'station' => null,
    'stations' => [],
    'nowPlaying' => '',
    'recentSongs' => ''
])

<div
    x-data="{
        player: 0,
        state: 'paused',
        currentTime: 0,
        min: 0,
        max: @js( config('app.max_rewind') ),
        liveUrl: @js( $liveurl ),
        title: null,
        image: '',
        station: '',
        author: null,
        isStarred: false,
        programmes: @js( $programmes ),
        nextProgramIndex: null,
        nextProgramme: {},
        dragging: false,
        booted: false,
        offsetSeconds: 0,
        newSource: '',
        brands: [],
        hls: false,
        volumeSection: false,
        currentVolume: 100,

        init() {
            this.fetchBrands();
            this.station = document.querySelector('#station');

            this.initPlayer();

            this.$nextTick(() => {
                this.setCurrentProgramme( this.programmes );
                this.setNextProgramme();
                this.booted = true;

                setInterval(() => {
                    this.setCurrentProgramme( this.programmes );
                }, 3000)

            })

            $watch('image', value => this.$dispatch('headercoverart', {image: value}))

            document.body.addEventListener('click', (e)=>window.anchorConfirmationModal(e, this.state==='playing'));

            this.$watch('currentVolume', ()=>this.updateVolume(this.currentVolume));
            this.$watch('clickCount', () => {
                this.volumeSection = false;
            });


            if(typeof(Cookies.get('volume')) !== 'undefined'){
                this.currentVolume = parseInt(Cookies.get('volume'))
            }
            
            this.$watch('volumeSection', (visible)=> {
                if(window.innerWidth < 490){
                    let body = document.querySelector('body');
                    if(visible){
                        body.style.overflow = 'hidden';
                    }else{
                        body.style.overflow = 'visible';
                    }
                }
            });
        },

        initPlayer(){
            this.station.src = this.liveUrl;
            if( !this.isSafari() ){
                $store.global.setLiveStream( true )
                this.station.play();
            }
            this.startListeners();

        },

        initHls(url) {

            hls = new Hls();
            hls.attachMedia(this.station);

            hls.on( Hls.Events.MEDIA_ATTACHED, () => {
                hls.loadSource( url );
                hls.on(Hls.Events.MANIFEST_PARSED, () => {
                    if(this.currentTime === 0){
                        $store.global.setLiveStream( true )
                    }
                    this.station.play();
                    this.hls = true;
                });
            })

            this.startListeners();

        },

        updateVolume(updatedVolume) {
            let volume = updatedVolume / 100;
            this.station.volume = volume;
            Cookies.set('volume', updatedVolume, { expires: 5 }) // Expires after 5 days
            volume === 0 ? this.station.muted = true : this.station.muted = false
        },


        fetchBrands(){
            axios.get('/brands').then((data) => {
                this.brands = data.data;
            })
        },

        setBrandImage(){
            if( this.brands.length > 0 ){
                const row = this.brands.filter( (item) => {
                    if(  item.epg_programme_id != null ){
                        return item.epg_programme_id == parseInt(this.programmes[this.nextProgramIndex - 1]?.['@attributes']['id'])
                    }

                })
                this.image = row.length ? row[0].thumbnail_img : ''
            }
        },

        startListeners(){
            this.station.onwaiting = () => {
                this.player = 2
                this.state = 'paused';
            }
            this.station.onplaying = () => {
                this.player = 1
                this.state = 'playing';
            }
        },
        seek ( offset ) {
            this.player = 2;
            this.offsetSeconds = offset

            if(this.offsetSeconds === 0){
                this.newSource = this.liveUrl
                if( this.hls  ) hls.stopLoad();
                $store.global.setLiveStream( true );
            }else{
                $store.global.setLiveStream( false );
                this.generateNewSource()
            }
            if (this.station.canPlayType('application/vnd.apple.mpegurl') || this.offsetSeconds === 0){
                this.station.src = this.newSource;
                this.station.load();
                this.station.play();
            }else if (Hls.isSupported()){
                this.createNewAudioInstance();
                if( this.hls  ) hls.destroy();
                this.initHls(this.newSource);
            }


        },

        isSafari(){
            return /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === '[object SafariRemoteNotification]'; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
        },

        generateNewSource(){
            let url = $store.global.station.rewindable_feed_url;

            // Replace offset in rewindable URL
            this.newSource = url.replace(/playlist_dvr_timeshift-[0-9]+/, 'playlist_dvr_timeshift-' + this.offsetSeconds.toString());

            return this.newSource;
        },

        createNewAudioInstance(){
            let player = document.querySelector('#player-container');
            player.innerHTML = `<audio id='station' class='hidden' controls></audio>`
        },

        setCurrentProgramme( programmes ){
            let playing = programmes.find( ( item, index ) => {
                return this.currentProgramme( item, index) === true;
            })
            if(playing != undefined){
                let title = playing['mediumName'].split('with');

                if( title != undefined ){
                    this.title = ( title[0] === undefined ) ? '' : title[0]
                    this.author = ( title[1] === undefined ) ? '' : 'with'+ title[title.length-1];
                }
                this.setNextProgramme();
            }
        },
        setNextProgramme() {
            if( this.nextProgramIndex != null ){

                let nextProgramme = {};
                let title = this.programmes[this.nextProgramIndex]?.mediumName?.split('with');
                let time = this.programmes[this.nextProgramIndex]?.location?.time['@attributes']['time'];

                if( typeof title != 'undefined' ){
                    nextProgramme.title = ( title === undefined || title[0] === undefined ) ? '' : title[0];
                    nextProgramme.author = ( title === undefined || title[1] === undefined ) ? '' : 'with'+ title[title.length-1];
                }

                nextProgramme.time = moment( time ).format('HH:mm');
                nextProgramme.programme_id = this.programmes[this.nextProgramIndex]?.['@attributes']['id'];

                this.nextProgramme = nextProgramme;

                this.setBrandImage();

            }
        },

        currentProgramme( program, index ){
            let start = program.location.time['@attributes'].time;
            let end = moment.duration( program.location.time['@attributes'].duration ).asSeconds();
            end = moment(start).add( end , 'seconds').toISOString();
            let playing = moment().subtract(this.offsetSeconds, 'seconds').isBetween( start, end );
            ( playing ) ? this.nextProgramIndex = index+1 : null;
            return playing;
        },

        get hasProgramme() {
            return this.programmes.length > 0;
        },

        get percentage() {
            if(this.currentTime < this.min) return 0;
            if(this.currentTime > this.max) return 100;

            let percentage = 100 - this.map(this.currentTime, this.min, this.max, 0, 100)
            // this.max = this.station.duration;
            return Math.round(percentage) + '%';
        },
        toggle() {
            if(this.player === 0){

                if( this.hls && !$store.global.liveStream ) hls.startLoad();
                this.station.play();
                this.state = 'playing';


                if( !this.booted ){
                    $store.global.setLiveStream( true );
                }


            }else{
                if( this.hls && !$store.global.liveStream ) hls.stopLoad();
                this.station.pause();
                this.player = 0;
                this.state = 'paused';

            }
        },
        fastforward() {
            let newValue = this.currentTime - 15;
            if(newValue < this.min){
                newValue = this.min;
                $store.global.setLiveStream( false );
            }
            this.currentTime = newValue;
            this.seek( newValue )
        },
        rewind() {
            let newValue = this.currentTime + 15;
            if(newValue >= this.max) {
                newValue = this.max;
                $store.global.setLiveStream( true );
            }
            this.currentTime = newValue;
            this.seek( newValue )

        },
        live() {
            $store.global.setLiveStream( true );
            this.currentTime = 0;
            this.seek( 0 )
        },
        get timeUsed() {

            let seconds = this.currentTime
            const hours = Math.floor(seconds / 3600);
            const minutes = Math.floor((seconds % 3600) / 60);
            const remainingSeconds = seconds % 60;

            let formattedTime;

            if( seconds > 3599 ) {
                formattedTime = [
                    hours.toString().padStart(2, '0'),
                    minutes.toString().padStart(2, '0'),
                    remainingSeconds.toString().padStart(2, '0')
                ].join(':');
            }else if( seconds > 59 ) {
                formattedTime = [
                    minutes.toString().padStart(2, '0'),
                    remainingSeconds.toString().padStart(2, '0')
                ].join(':');
            } else {
                formattedTime = seconds
            }


            return seconds > 0 ? `-${formattedTime}` : '00:00';
        },
        map(value, inMin, inMax, outMin, outMax) {
            return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
        },

    }"
    class="text-center text-white space-y-8"
>
    <div class="text-center text-white space-y-8">
        <div class="mx-auto max-w-xl space-y-8">
            <div>
                <h4 class="h4 font-open" x-text="title">-</h4>
                <p class="text-lg font-normal font-open" x-text="author">-</p>
            </div>



            <div id="player-container" class="hidden">
                <audio id="station" class="hidden" controls></audio>
            </div>

            @if($station->rewindable_feed_url)
                <div>
                    <div>
                        <div class="flex justify-between items-end text-grey-450 pb-1">
                            <div class="text-sm font-semibold" x-text="timeUsed"></div>
                            <button
                                class="text-2xl font-bold transition"
                                :class="`${ currentTime == 0 ?'text-pink-light':''}`"
                                x-text="'LIVE'"
                                @click="live"
                            >
                                -
                            </button>
                        </div>
                    </div>

                    <div class="relative">
                        <div class="bg-grey-450 w-ful h-[5px]">
                            <div class="bg-pink-light h-full" :style="{'width': percentage}"></div>
                        </div>
                        <template x-if="station.canPlayType('application/vnd.apple.mpegurl')">
                            <input
                                x-model.number="currentTime"
                                :min="min"
                                :max="max"
                                class="form-player-range absolute inset-0 d-rtl"
                                type="range"
                                x-on:mouseup="seek( currentTime )"
                                x-on:touchend="seek( currentTime )"
                            />
                        </template>
                        <template x-if="!station.canPlayType('application/vnd.apple.mpegurl')">
                            <input
                                x-model.number="currentTime"
                                :min="min"
                                :max="max"
                                class="form-player-range absolute inset-0 d-rtl"
                                type="range"
                                x-on:click="seek( currentTime )"
                            />
                        </template>
                    </div>


                </div>
            @endif

            <div>
                <div class="flex justify-center items-center relative gap-0 sm:gap-8 ml-3 sm:ml-0">
                    <div class="p-3"></div>
                    @if($station->rewindable_feed_url)
                        <button
                            @click="rewind"
                            :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="rewind" size="3.5rem" />
                            </div>
                            <div class="absolute inset-0 flex items-center justify-center text-lg font-semibold">15</div>
                        </button>
                    @endif

                    <button
                        class="btn btn-on-dark bg-pink-light rounded-full w-14 h-14 sm:w-20 sm:h-20 relative mx-3"
                        @click="toggle()"
                    >
                        <span x-show="player  === 0" 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 x-show="player === 1" x-cloak x-transition.duration.150ms class="absolute inset-0 flex justify-center items-center">
                            @if($station->rewindable_feed_url)
                                <x-icon name="pause" size="100%" class="text-black absolute inset-0 p-4" />
                            @else
                                <x-icon name="stop" size="80%" class="text-black inset-0 p-4" />
                            @endif
                        </span>
                        <image x-show="player === 2" x-cloak src="{{ asset('images/common/loader.gif') }}" alt="buffering" />
                    </button>

                    @if($station->rewindable_feed_url)
                        <button
                            @click="fastforward"
                            :disabled="currentTime==min"
                            :class="{'group': currentTime!==min}"
                            class="btn btn-on-dark !p-1 relative rounded-full mr-3 sm:mr-0"
                        >
                            <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>
                    @endif
                    <div id="volume">
                        <template x-if="volumeSection">
                            <div class="track-speed absolute bg-grad-track-speed top-[-225px] rounded-[10px] trackspeed-border md:px-6 py-5" x-transition>
                                <input
                                    x-cloak
                                    x-model="currentVolume"
                                    min="0"
                                    max="100"
                                    class="form-player-range h-48 accent-pink-secondary w-1 px-6 md:px-0"
                                    type="range"
                                    orient="vertical"
                                />
                            </div>
                        </template>
                        
                        <template x-if="currentVolume > 0"><x-icon name="speaker" size="1.5rem" @click="volumeSection = !volumeSection" class="cursor-pointer" /></template>
                        <template x-if="currentVolume == 0"><x-icon name="volume-off" size="1.5rem" @click="volumeSection = !volumeSection" class="cursor-pointer" /></template>
                    </div>
                </div>
            </div>
        </div>

        {{ $slot }}

        @if($station->hasSchedule())
            <div class="container-3 lg:flex mx-auto items-center justify-between text-white pt-4 space-y-4 lg:space-y-0">
                <div class="font-bold text-pink-light">Coming Up</div>
                <div>
                    <span class="font-bold" x-text="nextProgramme.time ?? '00:00'">-</span>
                    <span class="font-bold" x-text="nextProgramme.title ?? 'Unavailable'"></span>
                    <span x-text="nextProgramme.author ?? ''"></span>
                </div>
                <div class="sm:flex items-center justify-center gap-8">
                    <a href="{{ '/stations/'.$station->slug.'/schedule/today' }}" class="font-bold block text-pink-light hover:underline">View Full Schedule</a>
                    <button x-data @click="$dispatch('showchangestationmodal')" class="btn-pink inline-flex items-center gap-4 !mt-8 sm:!mt-0">
                        Change Station
                        <x-icon name="grid" size="1.2em" />
                    </button>
                </div>
            </div>
        @else
            <div class="pt-4 space-y-4 lg:space-y-0">
                <button x-data @click="$dispatch('showchangestationmodal')" class="mx-auto btn-pink inline-flex items-center gap-4 !mt-8 sm:!mt-0">
                    Change Station
                    <x-icon name="grid" size="1.2em" />
                </button>
            </div>
        @endif
    </div>

    <x-player.now-playing class="pt-10"></x-player.now-playing>

    @push('body.bottom')
        <x-modals.generic-1 open-event-name="showchangestationmodal">
            <div class="flex justify-center items-center w-full h-full pb-10">
                <div class="w-full space-y-4 text-white ">
                    <h2 class="h2 text-white text-center md:text-left">Change Station</h2>
                    <div class="flex flex-col md:flex-row w-full gap-8 lg:gap-14 mx-auto max-w-[200px] md:max-w-[100%]">

                        @foreach($stations as $station)
                            <a
                                href="{{ $station->getUrl() }}"
                                class="
                                {{ request()->is(ltrim($station->getUrl(), '/')) ? 'opacity-50 scale-95':'btn-scale-with-hover' }}
                                group w-full md:w-1/3 block aspect-square relative bg-grey-200 bg-cover bg-center rounded-sm
                                excluded
                                "
                                style="background-image: url({{ $station->getThumbnail() }})"
                            >
                                <x-cards.hover-play-state class="{{ request()->is(ltrim($station->getUrl(), '/')) ? '' : 'opacity-0 group-hover:opacity-100' }}" />
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </x-modals.generic-1>
    @endpush
</div>