let _demos = {
    1: {
        name: 'آزادی',
        cover: 'azadi.jpeg',
        alt: 'کاور آلبوم آزادی',
        src: 'native/Azadi_.mp3',
        type: ' ارکسترال سنتی',
        des: 'خوانندگان از مراد و جواد حسن زاده تنظیم توسط مهدی حسن زاده',
    },
    2: {
        name: 'همسر',
        cover: 'hamid-heidari.jpg',
        alt: 'عکس حمید حیدری',
        src: 'pop/Hamsar_Hamid_Heydari_v5.mp3',
        type: 'پاپ',
        des: 'خواننده حمید حیدری تنظیم توسط مهدی حسن زاده',
    },
    3: {
        name: 'خراسان',
        cover: 'khorasan.jpg',
        alt: 'عکس مهدی حسن زاده',
        src: 'misc/Hadi-Aliabadi-Khorasan.mp3',
        type: 'تلفیق',
        des: 'خواننده هادی علیابادی تنظیم مهدی حسن زاده',
    },
}
let _main = {
    hItems : null,
    imgUrl : 'src/img/cover/',
    audioUrl : 'src/audio/tracks/',
    init : () => {
        _main.hItems = document.querySelector('.cards')
        _main.hItems.innerHTML = ''
        for (let i in _demos) {
            p = _demos[i]
            let demo = document.createElement('div')
            demo.classList.add('card-1')
            demo.setAttribute('data-aos', 'fade-up')
            demo.setAttribute('data-aos-duration', '1400')
            demo.innerHTML = '<div class="demo-box w-[300px] h-[420px] my-4 flex flex-col justify-between items-center space-y-4" ><figure class="w-full h-[300px]"><img class="w-full h-full object-cover" src="'+ _main.imgUrl + p.cover +'" alt="'+ p.alt +'"><figcaption></figcaption></figure><article class="w-full space-y-2"><h2 class="head-light w-full">'+ p.name +'</h2><p class="card-para flex justify-between items-center">'+ p.des +' <span>'+ p.type +'</span></p></article><div class="flex justify-between items-center"><span class="play-btn bi-play-fill"></span><audio src="'+ _main.audioUrl + p.src +'" type="audio/mpeg"></audio><input class="timeline" type="range" max="100" value="0"><span class="mute-btn bi-volume-up-fill"></span><a href="'+ _main.audioUrl + p.src +'" title="دانلود آهنگ"><span class="download-al bi-download"></span></a></div></div>'

            _main.hItems.appendChild(demo)
        }
        for (let j = 0; j < document.querySelector('.cards').childElementCount; j++) {
            let _play = document.getElementsByClassName('play-btn')[j]
            let _timeline = document.getElementsByClassName('timeline')[j]
            let _mute = document.getElementsByClassName('mute-btn')[j]
            let _audio = document.getElementsByTagName('audio')[j]
            _play.addEventListener('click', () => {
                if(_audio.paused) {
                    _audio.play();
                    _play.classList.remove('bi-play-fill')
                    _play.classList.add('bi-pause')

                } else {
                    _audio.pause();
                    _play.classList.add('bi-play-fill')
                    _play.classList.remove('bi-pause')
                }
            })
            function audioEnded () {
                _play.classList.add('bi-play-fill')
            }
            _audio.onended = audioEnded
            function _timeLine () {
                const _percentagePosition = (100*_audio.currentTime) / _audio.duration
                _timeline.style.backgroundSize = `${_percentagePosition}% 100%`
                _timeline.value = _percentagePosition
            }
            _audio.ontimeupdate = _timeLine
            _timeline.addEventListener('change', () => {
                const _time = (_timeline.value * _audio.duration) / 100
                _audio.currentTime = _time
            })
            _mute.addEventListener('click', () =>{
                _audio.muted = !_audio.muted
                if (_audio.muted) {
                    _mute.classList.remove('bi-volume-up-fill')
                    _mute.classList.add('bi-volume-off-fill')    
                } else {
                    _mute.classList.add('bi-volume-up-fill')
                    _mute.classList.remove('bi-volume-off-fill')
                }
            })
        }
    }
}
window.addEventListener('DOMContentLoaded', _main.init)