import { ViewerCommunicator } from './viewer-communicator';
import { ExportFileType, IBoundingBox, MaterializeMeshConfig, MediaFormat, TextureMimeType } from './interfaces/viewer-communicator.interface';
import { IConfiguration } from './interfaces/configurator.interface';

const vc = new ViewerCommunicator({ hexaViewer: document.querySelector('hexa-viewer') as HTMLElement });

(function () {
    // vc.getCurrentScreenshot().then((s) => {
    //     console.log(s);
    // });

    let wireframeState = false, configState = false, uvState = false, matcapState = false, hideButtom = false;
    let materialize = document.getElementById('materialize') as HTMLElement;
    (document.getElementById('config-single') as HTMLElement).addEventListener('click', async () => {
        let config = [
            {
                // color: 'rgb(229, 222, 204)',
                thumbnail: 'https://www.tami4.co.il/sites/default/files/2021-04/edge_cream_front_552x820.png',
                asset: 'http://localhost:9000/index.html?load=https://cdn.creators3d.com/models/3811692498551105_raw.glb&auto-adjust=1&debug=1&tv=162'
            },
            {
                // color: 'rgb(0, 0, 0)',
                thumbnail: 'https://www.tami4.co.il/sites/default/files/2021-04/edge_black_front_552x820.png',
                asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F4697126561495946%2F4697126561495946.glb&autorotate=true&json-data=1651045292244&decrypt=1&tv=162&br=true&watermark=1',
            }
        ];
        config = [config[configState ? 1 : 0]];
        configState = !configState;
        vc.configurator.setConfigurator(config);
        vc.configurator.toggleConfiguratorUI(false);
        vc.configurator.selectConfigurator(0);
    });
    materialize.addEventListener('click', async () => {
        applyMaterial({
            RGB: [
                178,
                121,
                51
            ],
            roughness: 0.1,
            metalness: 1,
            transparent: false,
            environment: {
                type: 9,
                intensity: 1.3,
                blur: false
            },
            exposure: 1
        });
    }, false);

    let wireframe = document.getElementById('wireframe') as HTMLElement;
    wireframe.addEventListener('click', async () => {
        wireframeState = !wireframeState;
        vc.toggleWireframe(wireframeState);
    }, false);

    let uv = document.getElementById('uv') as HTMLElement;
    uv.addEventListener('click', async () => {
        uvState = !uvState;
        vc.toggleUvMode(uvState);
    }, false);

    let matcap = document.getElementById('matcap') as HTMLElement;
    matcap.addEventListener('click', async () => {
        matcapState = !matcapState;
        vc.toggleMatcapMode(matcapState, { color: '#ff0068' });
    }, false);

    let expotModel = document.getElementById('expotModel') as HTMLElement;
    expotModel.addEventListener('click', async () => {
        const exporderModel = await vc.expotModel({
            compressPNG: false,
            downloadFile: false,
            type: ExportFileType.GLB,
        });
        console.log(exporderModel);
    });

    let screenshotsSequence = document.getElementById('screenshotsSequence') as HTMLElement;
    screenshotsSequence.addEventListener('click', async () => {
        const videoBlob = await vc.getScreenshotsSequence({
            numOfFrames: 96,
            format: MediaFormat.VIDEO,
            // codec: 'vp9'
        }) as Blob;
        const video = document.createElement('video');
        video.autoplay = true;
        video.muted = true;
        video.loop = true;
        document.body.appendChild(video);
        const vidURL = URL.createObjectURL(videoBlob);
        video.onended = function() {
            URL.revokeObjectURL(vidURL);
        };
        // const link = document.createElement('a');
        // link.setAttribute(
        // 'download', 'v.webm');
        // link.href = vidURL;
        // link.setAttribute('target', '_blank');
        // document.body.appendChild(link);
        // link.click();
        // link.remove();
        video.src = vidURL;
    }, false);

    let exportModel = document.getElementById('export') as HTMLElement;
    exportModel.addEventListener('click', async () => {
        const data = await vc.expotModel({
            compressPNG: false,
            downloadFile: true,
            type: ExportFileType.GLB
        });
        console.log(data);
    }, false);

    const applyMaterial = async (material: MaterializeMeshConfig) => {
        await vc.onModelLoaded();
        let meshes = await vc.getMeshesData();
        for (let name in meshes) {
            vc.materializeMesh(name, material);
        }
    };

    const initConfigurator = () => {
        // const config = [
        //     {
        //         'color': '#ffa0f0',
        //         'materials': [
        //             {
        //                 'name': 'car_metal',
        //                 'color': '#ffa0f0'
        //             }
        //         ]
        //     },
        //     {
        //         'color': '4b4a4b',
        //         'materials': [
        //             {
        //                 'name': 'car_metal',
        //                 'color': '4b4a4b'
        //             }
        //         ]
        //     },
        //     {
        //         'color': '#010101',
        //         'materials': [
        //             {
        //                 'name': 'car_metal',
        //                 'color': '#010101'
        //             }
        //         ]
        //     }
        // ] as Array<IConfiguration>;
        // const config = [
        //     {
        //         'color': 'rgb(255, 255, 255)',
        //         'asset': 'https://vqa.hexa3d.io/index.html?load=%2Fviews%2Fqa%2Fitem%2F2022717%2F660070899346805%2F660070899346805.glb&autorotate=true&json-data=1658064892018&decrypt=1&br=true&tv=135&watermark=1'
        //     },
        //     {
        //         'color': 'rgb(229, 222, 204)',
        //         'asset': 'https://vqa.hexa3d.io/index.html?load=%2Fviews%2Fqa%2Fitem%2F2022717%2F5614144034778023%2F5614144034778023.glb&autorotate=true&json-data=1658065184207&decrypt=1&tv=135&watermark=1'
        //     },
        //     {
        //         'color': 'rgb(119, 111, 98)',
        //         'asset': 'https://vqa.hexa3d.io/index.html?load=%2Fviews%2Fqa%2Fitem%2F2022717%2F3949853585216815%2F3949853585216815.glb&autorotate=true&json-data=1658065089091&decrypt=1&tv=135&br=true&webp=1&watermark=1'
        //     }
        // ] as Array<IConfiguration>;
        const config = [
            {
                // color: 'rgb(229, 222, 204)',
                thumbnail: 'https://www.tami4.co.il/sites/default/files/2021-04/edge_cream_front_552x820.png',
                asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F1785766613823082%2F1785766613823082.glb&autorotate=true&json-data=1651045050192&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/50526c5d853941f395e47913e9852ab3.png'
            },
            {
                // color: 'rgb(0, 0, 0)',
                thumbnail: 'https://www.tami4.co.il/sites/default/files/2021-04/edge_black_front_552x820.png',
                asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F4697126561495946%2F4697126561495946.glb&autorotate=true&json-data=1651045292244&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/73fb4cb1d06f491fa6d8393f4704f816.png',
            },
            {
                // color: 'rgb(255, 255, 255)',
                thumbnail: 'https://www.tami4.co.il/sites/default/files/2021-04/edge_white_front_552x820.png',
                asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F6769057538255978%2F6769057538255978.glb&autorotate=true&json-data=1651046028136&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/e93b62f0f99e41c09c7b9c85a027e071.png'
            },
            {
                // color: 'rgb(220, 39, 25)',
                thumbnail: 'https://www.tami4.co.il/sites/default/files/2021-04/edge_red_front_552x820_0.png',
                asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F3370851792395505%2F3370851792395505.glb&autorotate=true&json-data=1651045321141&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/cc75a12053354011ae8b9a382f95eeb5.png'
            },
            {
                color: 'rgb(229, 222, 204)',
                asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F1785766613823082%2F1785766613823082.glb&autorotate=true&json-data=1651045050192&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/50526c5d853941f395e47913e9852ab3.png'
            },
            {
                color: 'rgb(0, 0, 0)',
                asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F4697126561495946%2F4697126561495946.glb&autorotate=true&json-data=1651045292244&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/73fb4cb1d06f491fa6d8393f4704f816.png',
            },
            {
                color: 'rgb(255, 255, 255)',
                asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F6769057538255978%2F6769057538255978.glb&autorotate=true&json-data=1651046028136&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/e93b62f0f99e41c09c7b9c85a027e071.png'
            },
            {
                color: 'rgb(220, 39, 25)',
                asset: 'https://v.hexa3d.io/index.html?load=%2Fviews%2Fproduction%2Fitem%2F2022427%2F3370851792395505%2F3370851792395505.glb&autorotate=true&json-data=1651045321141&decrypt=1&tv=135&br=true&watermark=1&pv=https://cdn.hexa3d.io/hotlink-ok/2022427/cc75a12053354011ae8b9a382f95eeb5.png'
            }
        ] as Array<IConfiguration>;
        // const config = [
        //     {
        //         'color': '#ffffff',
        //         'materials': [
        //             {
        //                 'name': 'Material1',
        //                 'textures': [
        //                     {
        //                         'maps': [
        //                             'map'
        //                         ],
        //                         'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_WHITE/Material1_diffuse.png'
        //                     }
        //                 ]
        //             },
        //             {
        //                 'name': 'Material2',
        //                 'textures': [
        //                     {
        //                         'maps': [
        //                             'map'
        //                         ],
        //                         'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_WHITE/Material2_diffuse.png'
        //                     },
        //                     {
        //                         'maps': [
        //                             'metalness',
        //                             'roughness',
        //                             'ao'
        //                         ],
        //                         'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_WHITE/Material2_roughnessMetallic.png'
        //                     }
        //                 ]
        //             }
        //         ],
        //         'sceneURL': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_WHITE.json?v=1650175969945'
        //     },
        //     {
        //         'color': '#000000',
        //         'materials': [
        //             {
        //                 'name': 'Material1',
        //                 'textures': [
        //                     {
        //                         'maps': [
        //                             'map'
        //                         ],
        //                         'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLACK/Material1_diffuse.png'
        //                     }
        //                 ]
        //             },
        //             {
        //                 'name': 'Material2',
        //                 'textures': [
        //                     {
        //                         'maps': [
        //                             'map'
        //                         ],
        //                         'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLACK/Material2_diffuse.png'
        //                     },
        //                     {
        //                         'maps': [
        //                             'metalness',
        //                             'roughness',
        //                             'ao'
        //                         ],
        //                         'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLACK/Material2_roughnessMetallic.png'
        //                     }
        //                 ]
        //             }
        //         ],
        //         'sceneURL': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLACK/910005796__910005808__910005823_GLTF.json'
        //     },
        //     {
        //         'color': '#0072ce',
        //         'materials': [
        //             {
        //                 'name': 'Material1',
        //                 'textures': [
        //                     {
        //                         'maps': [
        //                             'map'
        //                         ],
        //                         'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLUE/Material1_diffuse.png'
        //                     }
        //                 ]
        //             },
        //             {
        //                 'name': 'Material2',
        //                 'textures': [
        //                     {
        //                         'maps': [
        //                             'map'
        //                         ],
        //                         'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLUE/Material2_diffuse.png'
        //                     },
        //                     {
        //                         'maps': [
        //                             'metalness',
        //                             'roughness',
        //                             'ao'
        //                         ],
        //                         'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLUE/Material2_roughnessMetallic.png'
        //                     }
        //                 ]
        //             }
        //         ],
        //         'sceneURL': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_BLUE/910005798__910005801_GLTF.json'
        //     },
        //     {
        //         'color': '#afbded',
        //         'materials': [
        //             {
        //                 'name': 'Material1',
        //                 'textures': [
        //                     {
        //                         'maps': [
        //                             'map'
        //                         ],
        //                         'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_LILAC/Material1_diffuse.png'
        //                     }
        //                 ]
        //             },
        //             {
        //                 'name': 'Material2',
        //                 'textures': [
        //                     {
        //                         'maps': [
        //                             'map'
        //                         ],
        //                         'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_LILAC/Material2_diffuse.png'
        //                     },
        //                     {
        //                         'maps': [
        //                             'metalness',
        //                             'roughness',
        //                             'ao'
        //                         ],
        //                         'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_LILAC/Material2_roughnessMetallic.png'
        //                     }
        //                 ]
        //             }
        //         ],
        //         'sceneURL': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_LILAC/910005853__910005854_GLTF.json'
        //     }
        // ] as Array<IConfiguration>;
        (document.getElementById('configurator-init') as HTMLElement).addEventListener('click', async () => {
            vc.configurator.setConfigurator(config);
            config.forEach((c, i) => vc.configurator.preloadConfigurator(c, (i + 1) * 2000));
            vc.configurator.toggleConfiguratorUI(true);
        }, false);
        (document.getElementById('configurator-select') as HTMLElement).addEventListener('change', async (e: Event) => {
            vc.configurator.selectConfigurator(parseInt((e.target as HTMLSelectElement).value));
            wireframeState = false;
        });
        (document.getElementById('pic-in-pic') as HTMLElement).addEventListener('click', async () => {
            vc.togglePicInPic(!!!(document as any).pictureInPictureElement);
        }, false);
        (document.getElementById('webxr') as HTMLElement).addEventListener('click', async () => {
            if (await vc.isWebXrSupported())
                vc.toggleWebXR(true, true);
            else
                alert('This browser doesn\'t support WebXR');
        }, false);
        (document.getElementById('collision-init') as HTMLElement).addEventListener('click', async () => {
            await vc.onModelLoaded();
            vc.toggleCollision(true, '#ff0000');
            const c = await vc.waitForCollisions();
            console.log(c);
        }, false);
        (document.getElementById('preset') as HTMLElement).addEventListener('click', async () => {
          vc.applyPreset({
            hdri: {
              background: true,
              blur: false,
              format: 'hdr',
              intensity: 1,
              type: 9
            }
          } as any);
        }, false);
        (document.getElementById('sync-clock') as HTMLElement).addEventListener('click', async () => {
            const md = await vc.getMeshesData();
            const min = 'Arrow_Min', sec = 'Arrow_Sec', hour = 'Arrow_Hr';
            const syncClock = () => {
                setTimeout(syncClock.bind(this), 1000);
                const now = new Date();
                let hours = now.getHours(), minutes = now.getMinutes(), seconds = now.getSeconds();
                if (hours > 12)
                    hours -= 12;
                hours = 6 * hours;
                minutes = 6 * minutes;
                seconds = 6 * seconds;
                md[sec].rotation.y = seconds * (Math.PI / 180);
                md[min].rotation.y = minutes * (Math.PI / 180);
                md[hour].rotation.y = hours * (Math.PI / 180);
                vc.setMeshProps({
                    mesh: md[sec],
                    key: 'rotation',
                    value: md[sec].rotation
                });
                vc.setMeshProps({
                    mesh: md[min],
                    key: 'rotation',
                    value: md[min].rotation
                });
                vc.setMeshProps({
                    mesh: md[hour],
                    key: 'rotation',
                    value: md[hour].rotation
                });
            };
            syncClock();
        }, false);
    };
    initConfigurator();

    const applyTexture = async () => {
        await vc.onModelLoaded();
        vc.applyTexture({
            mapType: 'map',
            materialName: 'Display_MAT',
            mimeType: TextureMimeType.VIDEO,
            src: '#video'
        });
    };

    (document.getElementById('apply-texture') as HTMLElement).addEventListener('click', async () => {
        applyTexture();
    });

    (document.getElementById('hide-buttom') as HTMLElement).addEventListener('click', async () => {
        hideButtom = !hideButtom;
        vc.toggleHideBottom(hideButtom);
    });

    document.getElementById('file').addEventListener('change', (event: any) => {
        vc.displayFiles(event.target.files);
    }, false);
    vc.getBoundingBox().then((b: IBoundingBox) => {
        console.log(b);
    });
})();