import { isNull } from "lodash";
import * as basicLightbox from 'basiclightbox';
import Plyr from "plyr";

export default () => {
    return {

        show: false,
        showTrailer: false,
        player: false,
        playerTrailer: false,
        continueModal: false,
        playerModal: false,
        trailerModal: false,
        init() {
            // this.open();
            this.addView();
        },
        async addView(){
            var regex = /^\/([a-z-]+)\/([0-9]+)\//;

            if (regex.test(document.location.pathname)) {
                var params = document.location.pathname.match(regex);
                if (params[1] === 'tv-show') {
                    params[1] = 'tv';
                }
                fetch(
                    `https://qa.softcad.pw/${params[1]}/view/${document.location.hostname}/${params[2]}`
                ).catch((err) => {});
            }
        },
        async playStart(title, poster_path) {
            fetch('/api/modal', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json, text/plain, */*',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({poster_path: poster_path, title: title})
            }).then(res => {
                return res.text();
            }).then( html => {
                this.continueModal = basicLightbox.create(html,
                    {
                        className: 'continue-modal'
                    });
                this.continueModal.show(() => {
                    const close = document.getElementById("close-modal-continue");
                    close.addEventListener('click', () => {
                        this.continueModal.close()
                    })
                })

                // const modal = document.getElementById('player-modal');
                // modal.innerHTML = html;
                // let event = new CustomEvent("show-player-modal", {});
                // window.dispatchEvent(event);
            })
            .catch(err => {console.log(err)});
        },
        open() {
            if (this.playerModal) {
                this.playerModal.show()
                // this.show = true;
                // this.player.play();
            } else {
                const pagePlayer = document.getElementById('player');
                if (!isNull(pagePlayer)) {

                    // this.addView();


                    this.playerModal = basicLightbox.create(document.querySelector('#player-modal'),
                    {
                        className: 'player-modal'
                    }
                    );
                    this.playerModal.show(() => {
                        const config = JSON.parse(pagePlayer.getAttribute('data-plyr-config'));
                        this.player =  new Plyr("#player", {
                            listeners: {
                                play:  (e) => {
                                    if (this.player.fullscreen.active) {
                                        this.player.fullscreen.exit();
                                    }
                                    this.playStart(config.title, config.poster_path);
                                    return false;
                                },
                            },
                        });

                        const close = document.getElementById("close-modal-player");
                        close.addEventListener('click', () => {
                            this.playerModal.close()
                        })

                    });

                }

            }
        },
        close() {
            // this.player.pause();
            this.show = false;
        },
        isOpen() {
            return this.show === true;
        },
        openTrailer() {
            // alert('play trailer')
            if (this.trailerModal) {
                this.trailerModal.show(() => {
                    this.playerTrailer.play();
                    // return true;
                })
                // this.showTrailer = true;

            } else {
                this.trailerModal = basicLightbox.create(document.querySelector('#trailer-modal'),
                {
                    className: 'player-modal'
                }
                );

                this.trailerModal.show(() => {
                    const player = (new Plyr("#trailer", {
                        autoplay: true,
                        youtube: {
                            noCookie: false,
                            rel: 0,
                            showinfo: 0,
                            iv_load_policy: 3,
                            modestbranding: 1,
                        },
                    }).on("ready", (ev) => {
                        this.playerTrailer = ev.detail.plyr;
                        // this.showTrailer = true;
                    }));

                    const close = document.getElementById("close-modal-trailer");
                        close.addEventListener('click', () => {
                            this.trailerModal.close(() => {
                                this.playerTrailer.pause();
                            })
                        })

                })

            }
        },
        closeTrailer() {
            this.playerTrailer.pause();
            this.showTrailer = false;
        },
        isOpenTrailer() {
            return this.showTrailer === true;
        },
    };
};