// import Plyr from 'plyr';
// import Swal from 'sweetalert2';

import { isNull } from "lodash";

function trailerData() {
    return {
        modalOpened: false,
        openModal() {
            this.modalOpened = true;
            const player = (new Plyr("#trailer", {
                autoplay: true,
                youtube: {
                    noCookie: false,
                    rel: 0,
                    showinfo: 0,
                    iv_load_policy: 3,
                    modestbranding: 1,
                },
            }).source = {
                type: "video",
                sources: [
                    {
                        src: "7sdf-MwzfEA",
                        provider: "youtube",
                    },
                ],
            });
        }
    }

}

function showTrailer(embedId) {
    Swal.fire({
        // allowOutsideClick: true,

        width: "90%",
        allowEscapeKey: true,
        showCloseButton: true,
        showConfirmButton: false,
        // title: player.title,
        html: `<div id="trailer" data-plyr-provider="youtube" data-plyr-embed-id="${embedId}"></div>`,
        focusConfirm: false,
        // confirmButtonText: 'CONTINUE',
        didRender: () => {
            const player = (new Plyr("#trailer", {
                autoplay: true,
                youtube: {
                    noCookie: false,
                    rel: 0,
                    showinfo: 0,
                    iv_load_policy: 3,
                    modestbranding: 1,
                },
            }).source = {
                type: "video",
                sources: [
                    {
                        src: "7sdf-MwzfEA",
                        provider: "youtube",
                    },
                ],
            });
        },
        didDestroy: () => {},
    });
}

export function initialize() {
    window.trailer = function () {
        return {
          open: false,
          open() {
            this.show = true;
          },
          close() {
            this.show = false;
          },
          isOpen() {
            return this.show === true;
          }
        };
      };
    document.addEventListener('alpine:init', () => {
        Alpine.data('trailer', () => ({
            open: false,

            toggle() {
                this.open = ! this.open
            },
        }))
    })

    // document.addEventListener('alpine:init', () => { alert('trailer');
        // Alpine.data('trailer', () => ({
        //     init() {
        //         alert('trailer');
        //         // I get called before the element using this data initializes.
        //     }

        // }))
    // })
    // const clickTrailer = document.querySelector(".trailer");
    // if (!isNull(clickTrailer)) {
    //     const embedId = clickTrailer.getAttribute("data-id");
    //     clickTrailer.addEventListener("click", (event) => {
    //         event.preventDefault();
    //         showTrailer(embedId);
    //     });
    // }
}