"use strict";
import { util } from "../../util/util.js";
import PhotoSwipeLightbox from "../../../../css/vendor/libs/photoswipe/photoswipe-lightbox.esm.js";
//图片查看原图  todo 未来把图片组件单独拿出来  photo做一个分类
class khcPhoto {
    /**
     * @param obj.gallery 不能为空
     * @param obj.isDownload 允许为空 默认true 是否展示下载
     * @param obj.isLeftRotate 允许为空 默认true 是否展示左旋转
     * @param obj.isRightRotate 允许为空 默认true 是否展示右旋转
     * @returns {Promise<unknown>|*}
     */
    static init(obj){
        return new Promise((resolve, reject) => {
            //自定义icon，默认的不好看，使用自定义的
            let leftArrowSVGString = '<svg aria-hidden="true" class="pswp__icn" viewBox="0 0 100 125" width="100" height="125"><path d="M5,50L50,5l3,3L11,50l42,42l-3,3L5,50z M92,95l3-3L53,50L95,8l-3-3L47,50L92,95z"/></svg>';
            let lightbox=new PhotoSwipeLightbox({
                gallery: obj.gallery,
                children: 'a',
                showHideAnimationType: 'zoom',//打开是否有过度效果
                wheelToZoom: true,//官方解释：默认情况下，PhotoSwipe 使用 ctrl-wheel 缩放图像，如果启用此选项 - 图像将仅通过滚轮缩放。
                arrowPrevSVG: leftArrowSVGString,//自定义上一张icon
                arrowNextSVG: leftArrowSVGString,//自定义下一张icon
                pswpModule: () => import('../../../../css/vendor/libs/photoswipe/photoswipe.esm.js')
            });
            if(obj.isDownload==undefined||obj.isDownload==true){
                lightbox.on('uiRegister', ()=> {
                    lightbox.pswp.ui.registerElement({
                        name: 'download-button',
                        order: 9,
                        isButton: true,
                        tagName: 'a',
                        html: {
                            isCustomSVG: true,
                            inner: '<path d="M20.5 14.3 17.1 18V10h-2.2v7.9l-3.4-3.6L10 16l6 6.1 6-6.1ZM23 23H9v2h14Z" id="pswp__icn-download"/>',
                            outlineID: 'pswp__icn-download'
                        },
                        onInit: (el, pswp) => {
                            el.setAttribute('download', '');
                            el.setAttribute('target', '_blank');
                            el.setAttribute('rel', 'noopener');
                            el.setAttribute('title', '下载图片');
                            pswp.on('change', () => {
                                el.href = pswp.currSlide.data.src;
                            });
                        }
                    });
                })
            }
            if(obj.isLeftRotate==undefined||obj.isLeftRotate==true){
                lightbox.on('uiRegister', () =>{
                    let rotateFunc=null;
                    lightbox.pswp.ui.registerElement({
                        name: 'left-rotate-button',
                        ariaLabel: 'Toggle zoom',
                        order: 7,//排序
                        isButton: true,
                        html: '<i class="lnr lnr-redo d-block" style="font-size: 18px;color: white"></i>',
                        onInit: (el, pswp) => {
                            el.setAttribute('left-rotate', '');
                            el.setAttribute('target', '_blank');
                            el.setAttribute('rel', 'noopener');
                            el.setAttribute('title', '左旋转');
                            if(rotateFunc==null){
                                let leftMap={
                                    '90deg':'180deg',
                                    '180deg':'270deg',
                                    '270deg':'360deg',
                                    '360deg':'90deg'
                                }
                                rotateFunc= ()=>{
                                    let element=pswp.currSlide.content.element;
                                    let rotate=element.style.rotate;
                                    if(leftMap[rotate]){
                                        element.style.rotate=leftMap[rotate]
                                    }else{
                                        element.style.rotate='90deg';
                                        console.log(element.style.rotate)
                                    }
                                }
                            }
                            pswp.on('change', () => {
                                el.addEventListener('click',rotateFunc)
                            });
                        }
                    });
                })
            }
            if(obj.isRightRotate==undefined||obj.isRightRotate==true){
                lightbox.on('uiRegister', () =>{
                    let rotateFunc=null;
                    lightbox.pswp.ui.registerElement({
                        name: 'right-rotate-button',
                        ariaLabel: 'Toggle zoom',
                        order: 8,//排序
                        isButton: true,
                        html: '<i class="lnr lnr-undo d-block" style="font-size: 18px;color: white"></i>',
                        onInit: (el, pswp) => {
                            el.setAttribute('right-rotate', '');
                            el.setAttribute('target', '_blank');
                            el.setAttribute('rel', 'noopener');
                            el.setAttribute('title', '右旋转');
                            if(rotateFunc==null){
                                let prevMap={
                                    '270deg':'180deg',
                                    '180deg':'90deg',
                                    '90deg':'360deg',
                                    '360deg':'270deg'
                                }
                                rotateFunc= ()=>{
                                    let element=pswp.currSlide.content.element;
                                    let rotate=element.style.rotate;
                                    if(prevMap[rotate]){
                                        element.style.rotate=prevMap[rotate]
                                    }else{
                                        element.style.rotate='270deg';
                                    }
                                }
                            }
                            pswp.on('change', () => {
                                el.addEventListener('click',rotateFunc)
                            });
                        }
                    });
                })
            }
            lightbox.init();
            resolve();
        });
    }
}
export { khcPhoto }
