const MakaiNowPlayingElement = function() {
    const noCoverUrl = '//now.flash.moe/resources/no-cover.png';
    const hiddenClass = 'hidden';

    let coverElem, titleElem, artistElem;
    const element = <div class={`np ${hiddenClass}`}>
        <div class="np-header">
            <span class="np-header-icon">♪</span>
            <span class="np-header-text">Now listening to...</span>
        </div>
        <div class="np-cover">
            {coverElem = <img src={noCoverUrl} alt={noCoverUrl} onerror={() => {
                coverElem.alt = noCoverUrl;
                coverElem.src = noCoverUrl;
            }}/>}
        </div>
        <div class="np-details">
            <div class="np-artist">{artistElem = <a href="#" target="_blank" rel="noopener"></a>}</div>
            <div class="np-title">{titleElem = <a href="#" target="_blank" rel="noopener"></a>}</div>
        </div>
    </div>;

    return {
        get element() { return element; },

        get hidden() { element.classList.has(hiddenClass); },
        set hidden(value) {
            element.classList.toggle(hiddenClass, value);
        },

        get isDefaultCover() {
            return coverElem.src === noCoverUrl
                || coverElem.src === (location.protocol + noCoverUrl);
        },
        get coverUrl() { return coverElem.src; },
        set coverUrl(value) {
            if(value === undefined || value === null || value === '')
                value = noCoverUrl;

            coverElem.alt = value;
            coverElem.src = value;
        },

        get titleText() { return titleElem.textContent; },
        set titleText(value) {
            titleElem.title = value;
            titleElem.textContent = value;
        },
        get titleUrl() { return titleElem.href; },
        set titleUrl(value) {
            titleElem.href = value;
        },

        get artistText() { return artistElem.textContent; },
        set artistText(value) {
            artistElem.title = value;
            artistElem.textContent = value;
        },
        get artistUrl() { return artistElem.href; },
        set artistUrl(value) {
            artistElem.href = value;
        },
    };
};