(function () {
    console.log("webrtc.js Start");
    if (document.getElementById("catCatchWebRTC")) { return; }

    // 多语言
    let language = navigator.language.replace("-", "_");
    if (window.CatCatchI18n) {
        if (!window.CatCatchI18n.languages.includes(language)) {
            language = language.split("_")[0];
            if (!window.CatCatchI18n.languages.includes(language)) {
                language = "en";
            }
        }
    }

    const buttonStyle = 'style="border:solid 1px #000;margin:2px;padding:2px;background:#fff;border-radius:4px;border:solid 1px #c7c7c780;color:#000;"';
    const checkboxStyle = 'style="-webkit-appearance: auto;"';
    const CatCatch = document.createElement("div");
    CatCatch.innerHTML = `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAKlBMVEUAAADLlROxbBlRAD16GS5oAjWWQiOCIytgADidUx/95gHqwwTx0gDZqwT6kfLuAAAACnRSTlMA/vUejV7kuzi8za0PswAAANpJREFUGNNjwA1YSxkYTEqhnKZLLi6F1w0gnKA1shdvHYNxdq1atWobjLMKCOAyC3etlVrUAOH4HtNZmLgoAMKpXX37zO1FwcZAwMDguGq1zKpFmTNnzqx0Bpp2WvrU7ttn9py+I8JgLn1R8Pad22vurNkjwsBReHv33junzuyRnOnMwNCSeFH27K5dq1SNgcZxFMnuWrNq1W5VkNntihdv7ToteGcT0C7mIkE1qbWCYjJnM4CqEoWKdoslChXuUgXJqIcLebiphSgCZRhaPDhcDFhdmUMCGIgEAFA+Uc02aZg9AAAAAElFTkSuQmCC" style="-webkit-user-drag: none;width: 20px;">
    <div id="tips" data-i18n="waiting">正在等待视频流..."</div>
    <div id="time"></div>
    ${i18n("selectVideo", "选择视频")}:
        <select id="videoTrack">
            <option value="-1">${i18n("selectVideo", "选择视频")}</option>
        </select>
    ${i18n("selectAudio", "选择音频")}:
        <select id="audioTrack">
            <option value="-1">${i18n("selectVideo", "选择视频")}</option>
        </select>
    ${i18n("recordEncoding", "录制编码")}: <select id="mimeTypeList" style="max-width: 200px;"></select>
    <label><input type="checkbox" id="autoSave1"} ${checkboxStyle} data-i18n="save1hour">1小时保存一次</label>
    <label>
        <select id="videoBits">
            <option value="2500000" data-i18n="videoBits">视频码率</option>
            <option value="2500000">2.5 Mbps</option>
            <option value="5000000">5 Mbps</option>
            <option value="8000000">8 Mbps</option>
            <option value="16000000">16 Mbps</option>
        </select>
        <select id="audioBits">
            <option value="128000" data-i18n="audioBits">音频码率</option>
            <option value="128000">128 kbps</option>
            <option value="256000">256 kbps</option>
        </select>
    </label>
    <div>
        <button id="start" ${buttonStyle} data-i18n="startRecording">开始录制</button>
        <button id="stop" ${buttonStyle} data-i18n="stopRecording">停止录制</button>
        <button id="save" ${buttonStyle} data-i18n="save">保存</button>
        <button id="hide" ${buttonStyle} data-i18n="hide">隐藏</button>
        <button id="close" ${buttonStyle} data-i18n="close">关闭</button>
    </div>`;
    CatCatch.style = `
        position: fixed;
        z-index: 999999;
        top: 10%;
        left: 80%;
        background: rgb(255 255 255 / 85%);
        border: solid 1px #c7c7c7;
        border-radius: 4px;
        color: rgb(26, 115, 232);
        padding: 5px 5px 5px 5px;
        font-size: 12px;
        font-family: "Microsoft YaHei", "Helvetica", "Arial", sans-serif;
        user-select: none;
        display: flex;
        align-items: flex-start;
        justify-content: space-evenly;
        flex-direction: column;
        line-height: 20px;`;

    // 创建 Shadow DOM 放入CatCatch
    const divShadow = document.createElement('div');
    const shadowRoot = divShadow.attachShadow({ mode: 'closed' });
    shadowRoot.appendChild(CatCatch);
    // 页面插入Shadow DOM
    document.getElementsByTagName('html')[0].appendChild(divShadow);

    // 提示
    const $tips = CatCatch.querySelector("#tips");
    const tips = (text) => {
        $tips.innerHTML = text;
    }

    // 开始 结束 按钮切换
    const $start = CatCatch.querySelector("#start");
    const $stop = CatCatch.querySelector("#stop");
    const buttonState = (state = true) => {
        $start.style.display = state ? 'inline' : 'none';
        $stop.style.display = state ? 'none' : 'inline';
    }
    $start.style.display = 'inline';
    $stop.style.display = 'none';

    // 关闭
    CatCatch.querySelector("#close").addEventListener('click', function (event) {
        recorder?.state && recorder.stop();
        CatCatch.style.display = "none";
        window.postMessage({ action: "catCatchToBackground", Message: "script", script: "webrtc.js", refresh: true });
    });

    // 隐藏
    CatCatch.querySelector("#hide").addEventListener('click', function (event) {
        CatCatch.style.display = "none";
    });

    const tracks = { video: [], audio: [] };
    const $tracks = { video: CatCatch.querySelector('#videoTrack'), audio: CatCatch.querySelector('#audioTrack') };

    /* 核心变量 */
    let recorder = null;    // 录制器
    let autoSave1Timer = null;    // 1小时保存一次

    // #region 编码选择
    let option = { mimeType: 'video/webm;codecs=vp9,opus' };
    function getSupportedMimeTypes(media, types, codecs) {
        const supported = [];
        types.forEach((type) => {
            const mimeType = `${media}/${type}`;
            codecs.forEach((codec) => [`${mimeType};codecs=${codec}`].forEach(variation => {
                if (MediaRecorder.isTypeSupported(variation)) {
                    supported.push(variation);
                }
            }));
            if (MediaRecorder.isTypeSupported(mimeType)) {
                supported.push(mimeType);
            }
        });
        return supported;
    };
    const $mimeTypeList = CatCatch.querySelector("#mimeTypeList");
    const videoTypes = ["webm", "ogg", "mp4", "x-matroska"];
    const codecs = ["should-not-be-supported", "vp9", "vp8", "avc1", "av1", "h265", "h.265", "h264", "h.264", "opus", "pcm", "aac", "mpeg", "mp4a"];
    const supportedVideos = getSupportedMimeTypes("video", videoTypes, codecs);
    supportedVideos.forEach(function (type) {
        $mimeTypeList.options.add(new Option(type, type));
    });
    option.mimeType = supportedVideos[0];
    $mimeTypeList.addEventListener('change', function (event) {
        if (recorder && recorder.state && recorder.state === 'recording') {
            tips(i18n("recordingChangeEncoding", "录制中不能更改编码"));
            return;
        }
        if (MediaRecorder.isTypeSupported(event.target.value)) {
            option.mimeType = event.target.value;
            tips(`${i18n("recordEncoding", "录制编码")}:` + event.target.value);
        } else {
            tips(i18n("formatNotSupported", "不支持此格式"));
        }
    });
    // #endregion 编码选择

    // 录制
    $time = CatCatch.querySelector("#time");
    CatCatch.querySelector("#start").addEventListener('click', function () {
        if (!tracks.video.length && !tracks.audio.length) {
            tips(i18n("streamEmpty", "媒体流为空"));
            return;
        }
        let recorderTime = 0;
        let recorderTimeer = undefined;
        let chunks = [];

        // 音频 视频 选择
        const videoTrack = +CatCatch.querySelector("#videoTrack").value;
        const audioTrack = +CatCatch.querySelector("#audioTrack").value;
        const streamTrack = [];
        if (videoTrack !== -1 && tracks.video[videoTrack]) {
            streamTrack.push(tracks.video[videoTrack]);
        }
        if (audioTrack !== -1 && tracks.audio[audioTrack]) {
            streamTrack.push(tracks.audio[audioTrack]);
        }

        // 码率
        option.audioBitsPerSecond = +CatCatch.querySelector("#audioBits").value;
        option.videoBitsPerSecond = +CatCatch.querySelector("#videoBits").value;

        const mediaStream = new MediaStream(streamTrack);
        recorder = new MediaRecorder(mediaStream, option);
        recorder.ondataavailable = event => {
            chunks.push(event.data)
        };
        recorder.onstop = () => {
            recorderTime = 0;
            clearInterval(recorderTimeer);
            clearInterval(autoSave1Timer);
            $time.innerHTML = "";
            tips(i18n("stopRecording", "已停止录制!"));
            download(chunks);
            buttonState();
        }
        recorder.onstart = () => {
            chunks = [];
            tips(i18n("recording", "视频录制中"));
            $time.innerHTML = "00:00";
            recorderTimeer = setInterval(function () {
                recorderTime++;
                $time.innerHTML = secToTime(recorderTime);
            }, 1000);
            buttonState(false);
        }
        recorder.onerror = (msg) => {
            console.error(msg);
        }
        recorder.start(60000);
    });
    // 停止录制
    CatCatch.querySelector("#stop").addEventListener('click', function () {
        if (recorder) {
            recorder.stop();
            recorder = undefined;
        }
    });
    // 保存
    CatCatch.querySelector("#save").addEventListener('click', function () {
        if (recorder) {
            recorder.stop();
            recorder.start();
        }
    });
    // 每1小时 保存一次
    CatCatch.querySelector("#autoSave1").addEventListener('click', function () {
        clearInterval(autoSave1Timer);
        if (CatCatch.querySelector("#autoSave1").checked) {
            autoSave1Timer = setInterval(function () {
                if (recorder) {
                    recorder.stop();
                    recorder.start();
                }
            }, 3600000);
        }
    });

    // 获取webRTC流
    window.RTCPeerConnection = new Proxy(window.RTCPeerConnection, {
        construct(target, args) {
            const pc = new target(...args);
            pc.addEventListener('track', (event) => {
                const track = event.track;
                if (track.kind === 'video' || track.kind === 'audio') {
                    tips(`${track.kind} ${i18n("streamAdded", "流已添加")}`);
                    $tracks[track.kind].appendChild(new Option(track.label, tracks[track.kind].length));
                    $tracks[track.kind].value = tracks[track.kind].length;
                    tracks[track.kind].push(track);
                    if (tracks.video.length && tracks.audio.length) {
                        tips(i18n("videoAndAudio", "已包含音频和视频流"));
                    }
                }
            });
            pc.addEventListener('iceconnectionstatechange', (event) => {
                if (pc.iceConnectionState === 'disconnected' && recorder?.state === 'recording') {
                    recorder.stop();
                    tips(i18n("stopRecording", "连接已断开，录制已停止"));
                }
            });
            return pc;
        }
    });

    // #region 移动逻辑
    let x, y;
    const move = (event) => {
        CatCatch.style.left = event.pageX - x + 'px';
        CatCatch.style.top = event.pageY - y + 'px';
    }
    CatCatch.addEventListener('mousedown', function (event) {
        x = event.pageX - CatCatch.offsetLeft;
        y = event.pageY - CatCatch.offsetTop;
        document.addEventListener('mousemove', move);
        document.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', move);
        });
    });
    // #endregion 移动逻辑

    function download(chunks) {
        const blob = new Blob(chunks, { type: option.mimeType });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'recorded-video.mp4';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    }

    // 秒转换成时间
    function secToTime(sec) {
        let hour = (sec / 3600) | 0;
        let min = ((sec % 3600) / 60) | 0;
        sec = (sec % 60) | 0;
        let time = hour > 0 ? hour + ":" : "";
        time += min.toString().padStart(2, '0') + ":";
        time += sec.toString().padStart(2, '0');
        return time;
    }

    // 防止网页意外关闭跳转
    window.addEventListener('beforeunload', function (e) {
        recorder && recorder.stop();
        return true;
    });

    // i18n
    if (window.CatCatchI18n) {
        CatCatch.querySelectorAll('[data-i18n]').forEach(function (element) {
            element.innerHTML = window.CatCatchI18n[element.dataset.i18n][language];
        });
        CatCatch.querySelectorAll('[data-i18n-outer]').forEach(function (element) {
            element.outerHTML = window.CatCatchI18n[element.dataset.i18nOuter][language];
        });
    }
    function i18n(key, original = "") {
        if (!window.CatCatchI18n) { return original };
        return window.CatCatchI18n[key][language];
    }
})();