import { ConditionalDisplayElement } from '../base/conditional-display-element';
import { Guid } from '../../utils/guid';
import { DisplayMode, GlobalSettings } from '../../settings';
import { TextElementModal } from '../shared/text/text-element';
import { LOCALIZATION } from '../../localization';
import { isNil } from 'lodash';
export class VideoElement extends ConditionalDisplayElement {
    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, videoService, guiSize, svgRootClass, signalRAppId) {
        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
        this.videoService = videoService;
        this.guiSize = guiSize;
        this.svgRootClass = svgRootClass;
        this.videoId = '';
        this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
        this.localization = injector.get(LOCALIZATION);
        this.init();
    }
    dispose() {
        if (this.videoPlayer && typeof this.videoPlayer.stop === 'function') {
            this.videoPlayer.stop();
        }
        $('div.' + this.svgRootClass + ' video').each(function () {
            $(this).remove();
        });
    }
    hide() {
        super.hide();
        this.isShow = false;
        if (!isNil(this.videoId) && this.videoId !== '') {
            setTimeout(() => {
                $('#' + this.videoId).hide();
            }, 0);
        }
    }
    show() {
        super.show();
        this.isShow = true;
        setTimeout(() => {
            $('#' + this.videoId).show();
        }, 0);
    }
    init() {
        this.rootElement.selectAll('*').remove();
        if (!this.model.videoTag) {
            this.addVideoAddressToolTip(this.localization.unconfiguredVideoAddress);
            return;
        }
        this.videoId = Guid.newGuid().toString('n');
        this.videoService.getVideoUrl(this.model.videoTag).then(result => {
            const isAndroid = !!navigator.userAgent.match(/(Android)/i);
            let videoUrl = result.url;
            const patt = /https:.+.m3u8/;
            if (videoUrl.indexOf('http:') !== -1) {
                videoUrl = videoUrl.replace('http:', 'https:');
            }
            if (!patt.test(videoUrl)) {
                let videoToolTip = this.localization.invalidVideoAddress;
                if (isNil(videoUrl) || videoUrl === '') {
                    videoToolTip = this.localization.unconfiguredVideoAddress;
                }
                this.addVideoAddressToolTip(videoToolTip);
                return;
            }
            const video = this.rootElement.append('foreignObject')
                .attr('x', 0)
                .attr('y', 0)
                .attr('width', this.model.size.width)
                .attr('height', this.model.size.height)
                .append('xhtml:video')
                .attr('id', this.videoId)
                .attr('class', 'element-video')
                .attr('scareX', this.model.location.x / this.guiSize.width)
                .attr('scareY', this.model.location.y / this.guiSize.height)
                .attr('src', videoUrl)
                .style('width', '100%')
                .style('height', '100%')
                .style('object-fit', 'fill')
                .attr('playsInline', true)
                .attr('webkit-playsinline', true);
            if (this.isMobileMode) {
                if (isAndroid) {
                    if (result.isMobileType) {
                        video.attr('controls', true);
                    }
                    video.attr('autoplay', true);
                    video.attr('muted', true);
                }
                else {
                    video.attr('controls', true);
                    video.attr('muted', true);
                }
            }
            else {
                video.attr('controls', true);
                video.attr('autoplay', true);
                video.attr('muted', true);
            }
            if (this.isShow === false) {
                $('#' + this.videoId).hide();
            }
            this.videoPlayer = new EZUIPlayer(this.videoId);
            if (isAndroid && !result.isMobileType) {
                this.setAndroidVideo(this.videoId);
            }
        }).catch(() => {
            throw new Error('Failure of the videoService');
        });
    }
    addVideoAddressToolTip(videoToolTip) {
        const size = this.model.size;
        this.rootElement.append('image')
            .attr('width', size.width)
            .attr('height', size.height)
            .attr('xlink:href', 'assets/img/video.jpg')
            .attr('preserveAspectRatio', 'none')
            .attr('crossorigin', 'anonymous');
        const font = {
            isUnderline: false,
            isBold: false,
            isItalic: false,
            fontSize: '16px',
            fontFamily: 'Microsoft YaHei',
            color: '#fff',
            textAlign: 'center'
        };
        const textElement = new TextElementModal(videoToolTip, font, size.width, size.height);
        this.$element.append(textElement.Element);
    }
    setAndroidVideo(videoId) {
        let isFullscreen = false;
        const videoElement = $('#' + videoId);
        let preHeight = videoElement.height();
        let preWidth = videoElement.width();
        let preTop = videoElement.css('top');
        let preLeft = videoElement.css('left');
        videoElement.on('click', () => {
            if (!isFullscreen) {
                preHeight = videoElement.height();
                preWidth = videoElement.width();
                preTop = videoElement.css('top');
                preLeft = videoElement.css('left');
                const width = document.body.clientWidth;
                const height = width * 9 / 16;
                videoElement.css('width', width + 'px');
                videoElement.css('height', height + 'px');
                videoElement.css('left', '0px');
                videoElement.css('top', '0px');
                videoElement.css('z-index', '99');
                isFullscreen = true;
            }
            else {
                videoElement.css('width', preWidth + 'px');
                videoElement.css('height', preHeight + 'px');
                videoElement.css('left', preLeft);
                videoElement.css('top', preTop);
                videoElement.css('z-index', '0');
                isFullscreen = false;
            }
        });
    }
}
