import Player from "../../BackgroundJobs/Player";
import EventBus, { Events, Event } from "../../Events/EventBus";
import { fetchData } from "../../Utils/Fetch";
import AppData from "../../Common/AppData";

class PlaylistUI {

    _playlistData;
    _isOptionOpen = false;
    _canDismissOptions = true;
    _isPlaying = false;
    _component_base_ui;
    _isRemoving = false;

    constructor(component_base_ui, playlistData = null) {
        this._component_base_ui = component_base_ui;
        this._playlistData = playlistData;
        this._handleEvents();
        const playerPlaylistId = Player.getInstance().getPlaylistId();
        if (playerPlaylistId && this._playlistData && playerPlaylistId === this._playlistData.id) {
            this._setStatus(true);
        }
    }

    _handleEvents() {
        const _this = this;
        this._component_base_ui.on('click', function(event) {
            event.preventDefault();
            if (!_this._isPlaying) {
                Player.getInstance().playSounds(_this._playlistData.sounds, _this._playlistData.id);
                EventBus.getInstance().triggerEvent(Events.PLAYLIST_PLAY, { id: _this._playlistData?.id });
            } else {
                Player.getInstance().destroyAll();
                _this._setStatus(false);
            }
        })

        this._component_base_ui.find('.edit-playlist').on('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            _this._closeOptions();
            
            const { new_playlist } = AppData.getInstance().get('routes');
            window.location.hash = `${new_playlist.hash}?pid=${_this._playlistData.id}`;
        });

        this._component_base_ui.find('.remove-playlist').on('click', async function(event) {
            event.preventDefault();
            event.stopPropagation();
            _this._closeOptions();

            if (_this._isRemoving) {
                return;
            }

            _this._isRemoving = true;
            const playerPlaylistId = Player.getInstance().getPlaylistId();
            if (playerPlaylistId && playerPlaylistId === _this._playlistData.id) {
                Player.getInstance().destroyAll();
            }

            const result = await fetchData('playlist', 'DELETE', {
                playlistData: {
                    playlistId: _this._playlistData.id
                }
            });
            _this._isRemoving = false;
            _this._component_base_ui.remove();
            _this._removePlaylistBackground();
        });

        this._component_base_ui.find('.playlist-options-btn').on('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            _this._isOptionOpen = !_this._component_base_ui.find('.playlist-options').hasClass('hidden');
            if (!_this._isOptionOpen) {
                _this._openOptions();
            } else {
                _this._closeOptions();
            }
        })

        const documentClick = new Event(
            Events.DOCUMENT_CLICK,
            (payload) => {
                const menu = _this._component_base_ui.find('.playlist-options')[0];
                if (!menu.contains(event.target) && !event.target.closest('.playlist-options-btn')) {
                    menu.classList.add('hidden');
                    _this._closeOptions();
                }
            }
        );
        EventBus.getInstance().registerEvent(documentClick);

        this.playlistPlayEv = new Event(
            Events.PLAYLIST_PLAY,
            (payload) => {
                if (payload?.id === this._playlistData.id) {
                    this._setStatus(true);
                } else {
                    this._setStatus(false);
                }
            }
        );
        EventBus.getInstance().registerEvent(this.playlistPlayEv);

        this.playlistAutoPlayEv = new Event(
            Events.PLAYLIST_AUTO_PLAY,
            (payload) => {
                if (payload?.id === this._playlistData.id) {
                    Player.getInstance().playSounds(_this._playlistData.sounds, this._playlistData.id);
                    this._setStatus(true);
                } else {
                    Player.getInstance().destroyAll();
                    this._setStatus(false);
                }
            }
        );
        EventBus.getInstance().registerEvent(this.playlistAutoPlayEv);

        const goToSleepMode = new Event(
            Events.GO_TO_SLEEP_MODE,
            (payload) => {
                this._setStatus(false);
            }
        );
        EventBus.getInstance().registerEvent(goToSleepMode);
    }

    _setStatus(playing) {
        this._isPlaying = playing;
        if (this._isPlaying) {
            this._deployPlaylistBackground();
            this._component_base_ui.addClass('active');
            this._component_base_ui.find('.play-indicator').removeClass('hidden');
        } else {
            this._removePlaylistBackground();
            this._component_base_ui.removeClass('active');
            this._component_base_ui.find('.play-indicator').addClass('hidden');
        }
    }

    _openOptions() {
        this._component_base_ui.find('.playlist-options').removeClass('hidden');
        this._isOptionOpen = true;
    }

    _closeOptions() {
        this._component_base_ui.find('.playlist-options').addClass('hidden');
        this._isOptionOpen = false;
    }

    _deployPlaylistBackground() {
        EventBus.getInstance().triggerEvent(Events.DEPLOY_PLAYLIST_BACKGROUND, { playlistData: this._playlistData });
    }

    _removePlaylistBackground() {
        EventBus.getInstance().triggerEvent(Events.REMOVE_PLAYLIST_BACKGROUND, { playlistData: this._playlistData });
    }

    gcc() {
        EventBus.getInstance().removeEvent(this.playlistPlayEv);
        EventBus.getInstance().removeEvent(this.playlistAutoPlayEv);
    }
}
export default PlaylistUI;