/* eslint-disable no-new */
/* eslint-disable react/sort-comp */
import React from 'react';
import { browser } from 'cbkfe-utils';
import './style';
// import Siema from './semia';
import { StackBlurImg, Videos, Swiper } from 'cbkfe-ui';
import { previewImage, mb_lowPowerMode } from 'cbkfe-bridge';
import { gt } from '../track';

// 是否开启低电量模式
// result = low 为低电量模式, none 非低电量模式
let lowPowerMode = '';
if (!browser.versions.android) {
    mb_lowPowerMode({
        callback: (res) => {
            lowPowerMode = res && res.result;
        }
    });
}

export default class Swipers extends React.Component {
    constructor(props) {
        super();
        this.inWX = browser.versions.wechat;
        this.isApp = browser.parseUA.isApp;
        this.isAndroid = browser.versions.android;
        // this.containerHeight = this.isApp ? '16.5rem' : '13rem';
        this.containerHeight = props.containerHeight || window.screen.availWidth * 22 / 25 + 'px';
        this.state = {
            transition: true,
        };
    }

    preLoadFirst() { // 进来先预加载第一张
        return new Promise((resolve) => {
            let { images } = this.props;
            let newImage = new Image();
            newImage.src = images[0];
            newImage.onload = resolve;
            newImage.onerror = resolve;
        });
    }

    componentDidMount() {
        if (this.props.disableStackBlur) {
            this.setState({ transition: false });
        }
    }
    defaultIndex = 0;
    // 初始化swiper
    initSwiper = () => {
        let { containerClassName, noBlur } = this.props;
        let selector = containerClassName ? `.${containerClassName} .cbk-swiper` : '.cbk-swiper';
        let modalSelector = containerClassName ? `.${containerClassName} .cbk-swiper-modal` : '.cbk-swiper-modal';
        // new Siema({
        //     selector: selector,
        //     duration: 300,
        //     easing: 'ease-out',
        //     perPage: 1,
        //     startIndex: 0,
        //     draggable: true,
        //     multipleDrag: true,
        //     threshold: 30,
        //     loop: false,
        //     rtl: false,
        //     blurCount: noBlur ? 0 : 10,
        //     showIndex: true, // 显示索引
        //     modal: this.props.showModal ? modalSelector : false,
        //     onInit: () => { },
        //     onChange: (index) => {
        //         this.defaultIndex = index;
        //     },
        // });

        new Swiper({
            selector: selector,
            pagination: true,
            paginationClassName: 'cbk-swiper__pagination'
        });
    }

    componentDidUpdate() {
        !this.state.transition && this.initSwiper();
    }
    onImageClick() {
        let images = this.props.images;
        if (this.isApp && this.isAndroid) { // 安卓会自动拼接带水印带图片
            images = images.map(img => img.replace('@!sn1080', ''));
        }
        let _config = {
            current: images[this.defaultIndex],
            selected: this.defaultIndex,
            urls: images
        };
        previewImage(_config);
    }

    shouldComponentUpdate(nextProps, nextState) {
        let nextImages = nextProps.images;
        let oldImages = this.props.images;
        // 如果进来的images和之前的一样并且state中的transition没变化的话，那么不进行更新，避免多次加载
        if (
            typeof nextImages === typeof oldImages
            && Array.isArray(nextImages)
            && nextImages.length === oldImages.length
            && !nextImages.filter((item, index) => item !== oldImages[index]).length // 如果每个元素都相等的话，那么这个长度为0
            && nextState.transition === this.state.transition
        ) {
            return false;
        }
        return true;
    }

    render() {

        let { images, videoList, className, style, position = 'bottom', swiperClassName, disableStackBlur, noShadow } = this.props;
        let { transition } = this.state;
        return (
            <div
                style={{
                    height: this.containerHeight
                }}
                className={`cbk-swiper-container ${swiperClassName} ${(this.isApp && !noShadow) ? 'swiper-container--shadow' : ''}`}>
                {
                    !disableStackBlur && <div className="stackBlurImg">
                        <StackBlurImg
                            url={images[0]}
                            size="@!sn1080"
                            position={position}
                            height={this.containerHeight}
                            onLoadEnd={() => {
                                this.preLoadFirst().then(() => {
                                    this.setState({ transition: false });
                                    setTimeout(() => {
                                        document.querySelector('.stackBlurImg').style.display = 'none';
                                    }, 100);
                                });

                            }}
                        />
                    </div>
                }

                {
                    !transition ? <div
                        style={{
                            height: this.containerHeight
                        }}
                        className="cbk-swiper">
                        {videoList && videoList.length ? (
                            <div className="cbk-swiper-item" style={{ height: this.containerHeight }}>
                                <Videos
                                    height={330}
                                    muted={true}
                                    url={videoList[0].videoUrl}
                                    poster={images && images.length ? images[0] : ''}
                                    autoplay={this.isApp && !this.isAndroid && lowPowerMode === 'low' ? false : true}
                                />
                                {/* this.isApp && this.isIos && lowPowerMode => 在 app 里 ios 开起低电量模式时关闭视频自动播放 */}
                            </div>
                        ) : null}
                        {
                            images && Array.isArray(images)
                            && images.map((img, index) => <div {...gt(`gbdetail_gds_thumpic_pv,gbdetail_gds_thumpic_click/${index}/url(${img})`)} onClick={() => {
                                this.onImageClick(index);
                            }} key={index} className="cbk-swiper-item" style={{ height: this.containerHeight }}>
                                <img className="cbk-swiper-img" src={img} />
                            </div>)
                        }
                        {this.inWX && images && Array.isArray(images) ? (
                            <div className="cbk-swiper-item cbk-swiper-lastItem" style={{ height: this.containerHeight }}>
                                <img className="cbk-swiper-img" src={images[images.length - 1]} />
                                <div className={`cbk-swiper-modal ${className}`} style={style}>
                                    {this.props.children}
                                </div>
                            </div>
                        ) : null}
                    </div> : null
                }

            </div>
        );
    }
}