<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Rio Viz</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
        
        <link href='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.min.css' rel='stylesheet'>
        <script src='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.js'></script>

        <style>
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }

            .zoom-info {
                z-index: 10;
                position: absolute;
                bottom: 17px;
                right: 0;
                padding: 5px;
                width: auto;
                height: auto;
                font-size: 12px;
                color: #000;
            }

            .loading-map {
                position: absolute;
                width: 100%;
                height: 100%;
                color: #FFF;
                background-color: #000;
                text-align: center;
                opacity: 0.5;
                font-size: 45px;
            }

            .loading-map.off {
                opacity: 0;
                -o-transition: all .5s ease;
                -webkit-transition: all .5s ease;
                -moz-transition: all .5s ease;
                -ms-transition: all .5s ease;
                transition: all ease .5s;
                visibility: hidden;
            }

            .middle-center {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .middle-center * {
                display: block;
                padding: 5px;
            }

            #menu {
                left: 0;
                top: 0;
                -o-transition: all .5s ease;
                -webkit-transition: all .5s ease;
                -moz-transition: all .5s ease;
                -ms-transition: all .5s ease;
                transition: all ease .5s;
            }

            #menu.off {
                left: -360px;
                -o-transition: all .5s ease;
                -webkit-transition: all .5s ease;
                -moz-transition: all .5s ease;
                -ms-transition: all .5s ease;
                transition: all ease .5s;
            }

            #toolbar {
                height: 35px;
            }

            #toolbar li {
                display: block;
                color: #fff;
                background-color: #556671;
                font-weight: 700;
                font-size: 12px;
                padding: 5px;
                height: 100%;
                width: 100%;
                text-transform: uppercase;
                text-align: center;
                text-decoration: none;
                outline: 0;
                cursor: pointer;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            #toolbar li svg {
                font-size: 25px;
                line-height: 25px;
                padding-bottom: 0;
            }

            #toolbar li:hover {
                background-color: #28333b;
            }

            #toolbar li.active {
                color: #000;
                background-color: #fff;
            }

            #toolbar li.disabled {
                pointer-events: none;
                opacity: 0.4;
            }

            #menu-content section {
                display: none;
            }

            #menu-content section.active {
                display: inherit;
            }

            #hide-arrow {
                -o-transition: all .5s ease;
                -webkit-transition: all .5s ease;
                -moz-transition: all .5s ease;
                -ms-transition: all .5s ease;
                transition: all ease .5s;
            }

            #hide-arrow.off {
                transform: rotate(-180deg);
            }

            #btn-hide {
                position: absolute;
                top: 0;
                height: 35px;
                font-size: 35px;
                line-height: 35px;
                vertical-align: middle;
                right: -35px;
                color: #28333b;
                background-color: #fff;
            }

            #btn-hide:hover {
                color: #fff;
                background-color: #28333b;
                cursor: pointer;
            }

            .line-red {
                fill: none;
                stroke: red;
                stroke-width: 1.5px;
            }

            .line-green {
                fill: none;
                stroke: green;
                stroke-width: 1.5px;
            }

            .line-blue {
                fill: none;
                stroke: blue;
                stroke-width: 1.5px;
            }

            @media(max-width: 767px) {
                #menu.off {
                    left: -240px;
                    -o-transition: all .5s ease;
                    -webkit-transition: all .5s ease;
                    -moz-transition: all .5s ease;
                    -ms-transition: all .5s ease;
                    transition: all ease .5s;
                }

                .mapboxgl-ctrl-attrib {
                    font-size: 10px;
                }
            }
        </style>
    </head>
    <body>

    <div id='menu' class='flex-child w240 w360-ml absolute bg-white z2 off'>
        <div id='menu-content' class='relative'>
            <!-- RGB Selection -->

            <!-- 1 Band Selection -->
            <section id='1b-section' class='px12 pt12 pb6 active'>
                <div class='txt-h5 mb6 color-black'>
                    <svg class='icon icon--l inline-block'><use xlink:href='#icon-layers' /></svg> Layers
                </div>
                <div class='select-container wmax-full pb6'>
                    <select id='layer-selector' class='select select--s select--stroke wmax-full color-black'>
                    </select>
                    <div class='select-arrow color-black'></div>
                </div>

                <!-- Resampling -->
                <div class='px12 pt12 pb6'>
                    <div class='txt-h5 mt6 mb6 color-black'>Resampling Method</div>
                    <div id='resamp-selector' class='toggle-group bg-gray-faint mt6 mb6' style="line-height: 0">
                        <label class='toggle-container'>
                            <input value='bilinear' name='toggle-resamp' type='radio' />
                            <div title='bilinear' class='toggle color-gray-dark-on-hover'>bilinear</div>
                        </label>
                        <label class='toggle-container'>
                            <input value='cubic' name='toggle-resamp' type='radio' />
                            <div title='cubic' class='toggle color-gray-dark-on-hover'>cubic</div>
                        </label>
                        <label class='toggle-container'>
                            <input value='nearest' checked='checked' name='toggle-resamp' type='radio' />
                            <div title='nearest' class='toggle color-gray-dark-on-hover'>nearest</div>
                        </label>
                    </div>
                </div>

                <!-- Color Map -->
                <div id='colormap-section'>
                    <div class='txt-h5 mb6 color-black'><svg class='icon icon--l inline-block'>
                            <use xlink:href='#icon-palette' /></svg> Color Map</div>
                    <div class='select-container wmax-full'>
                        <select id='colormap-selector' class='select select--s select--stroke wmax-full color-black'>
                            <option value='b&w'>Internal</option>
                            <option value=cfastie>CFastie</option>
                            <option value=rplumbo>RPlumbo</option>
                            <option value=schwarzwald>Schwarzwald (elevation)</option>
                            <option value=viridis>Viridis</option>
                            <option value=rdbu_r>Blue-Red</option>
                            <option value=bugn>Blue-Green</option>
                            <option value=ylgn>Yellow-Green</option>
                            <option value=magma>Magma</option>
                            <option value=gist_earth>Earth</option>
                            <option value=ocean>Ocean</option>
                            <option value=terrain>Terrain</option>
                        </select>
                        <div class='select-arrow color-black'></div>
                    </div>
                </div>
            </section>

            <div id='rescale-section' class='px6 py6 none'>
                <div class='txt-h5 mb6 color-black'>Histogram min/max</div>
                <div>
                    <input id="min-value" class='input input--s wmax60 inline-block align-center color-black' value='0' />
                    <input id="max-value" class='input input--s wmax60 inline-block align-center color-black' value='1000' />
                </div>
            </div>

            <div id='cformula-section' class='px6 py6'>
                <div class='txt-h5 mb6 color-black'>Color Formula</div>
                <input id="ColorFormulaValue" class='input input--s w-full color-black' value='' />
            </div>
            <button id="updateColor" class='btn bts--xs btn--stroke bg-darken25-on-hover txt-s color-black ml12'>Apply</button>

        </div>
        <button id='btn-hide'><svg id='hide-arrow' class='icon'><use xlink:href='#icon-arrow-right' /></svg></button>
    </div>

    <div id='map'>
        <div id='loader' class="loading-map z3">
            <div class="middle-center">
                <div class="round animation-spin animation--infinite animation--speed-1">
                    <svg class='icon icon--l inline-block'>
                        <use xlink:href='#icon-satellite' /></svg>
                </div>
            </div>
        </div>
        <div class="zoom-info"><span id="zoom"></span></div>
    </div>

    <script>
        var scope = { metadata: {}, config: {} }

        mapboxgl.accessToken = '{{ mapbox_access_token  }}'
        const tilejson_endpoint = '{{ tilejson_endpoint }}'
        const info_endpoint = '{{ info_endpoint }}'


        let style
        if (mapboxgl.accessToken !== '') {
            style = 'mapbox://styles/mapbox/{{ mapbox_style }}-v9'
        } else {
            style = { version: 8, sources: {}, layers: [] }
        }

        var map = new mapboxgl.Map({
            container: 'map',
            style: style,
            center: [0, 0],
            zoom: 1
        })

        map.on('zoom', function (e) {
            const z = (map.getZoom()).toString().slice(0, 6)
            document.getElementById('zoom').textContent = z
        })

        const switchViz = () => {
            if (map.getLayer('raster')) map.removeLayer('raster')
            if (map.getSource('raster')) map.removeSource('raster')

            params = {
                resampling_method: document.getElementById('resamp-selector').querySelector("input[name='toggle-resamp']:checked").value
            }

            const active_layer = document.getElementById('layer-selector')[document.getElementById('layer-selector').selectedIndex]
            indexes = active_layer.getAttribute('data-indexes')
            params.indexes = indexes

            if (scope.metadata.dtype !== "uint8") {
                const minV = parseFloat(document.getElementById('min-value').value)
                const maxV = parseFloat(document.getElementById('max-value').value)
                params.rescale = `${minV},${maxV}`
            }
            
            if (document.getElementById('ColorFormulaValue').value !== '') {
                params.color_formula = document.getElementById('ColorFormulaValue').value
            }

            const cmap = document.getElementById('colormap-selector')[document.getElementById('colormap-selector').selectedIndex]
            if (cmap.value !== 'b&w') params.color_map = cmap.value

            const url_params = Object.keys(params).map(i => `${i}=${params[i]}`).join('&')
            let url = `${tilejson_endpoint}?${url_params}`
            console.log(url)
            map.addSource('raster', { type: 'raster', url: url, tileSize: 256 })
            map.addLayer({
                id: 'raster',
                type: 'raster',
                source: 'raster'
            })
        }

        document.getElementById('btn-hide').addEventListener('click', () => {
            document.getElementById('hide-arrow').classList.toggle('off')
            document.getElementById('menu').classList.toggle('off')
        })

        document.getElementById('resamp-selector').addEventListener('change', (e) => {
            switchViz()
        })

        document.getElementById('layer-selector').addEventListener('change', () => {
            const active_layer = document.getElementById('layer-selector')[document.getElementById('layer-selector').selectedIndex]
            switchViz()
        })

        document.getElementById('colormap-selector').addEventListener('change', () => {
            switchViz()
        })

        document.getElementById('updateColor').addEventListener('click', () => {
            switchViz()
        })

        const bboxPolygon = (bounds) => {
            return {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [[
                        [bounds[0], bounds[1]],
                        [bounds[2], bounds[1]],
                        [bounds[2], bounds[3]],
                        [bounds[0], bounds[3]],
                        [bounds[0], bounds[1]]
                    ]]
                },
                'properties': {}
            }
        }

        const addAOI = (bounds) => {
            const geojson = {
                "type": "FeatureCollection",
                "features": [bboxPolygon(bounds)]
            }

            map.addSource('aoi', {
                'type': 'geojson',
                'data': geojson
            })

            map.addLayer({
                id: 'aoi-polygon',
                type: 'line',
                source: 'aoi',
                layout: {
                    'line-cap': 'round',
                    'line-join': 'round'
                },
                paint: {
                    'line-color': '#3bb2d0',
                    'line-width': 1
                }
            })
            return
        }

        const truncate_lnglat = (lng, lat) => {
            if (lng > 180.0) {
                lng = 180.0
            } else if (lng < -180.0) {
                lng = -180.0
            }
            if (lat > 90.0) {
                lat = 90.0
            } else if (lat < -90.0) {
                lat = -90.0
            }
            return [lng, lat]
        }

        map.on('load', () => {
            fetch(`${info_endpoint}`)
                .then(res => {
                    if (res.ok) return res.json()
                    throw new Error('Network response was not ok.')
                })
                .then(data => {
                    scope.metadata = data
                    console.log(data)

                    if (['uint8', 'int8'].indexOf(scope.metadata.dtype) === -1) {
                        document.getElementById('rescale-section').classList.toggle('none')
                    }

                    //1 band
                    const layerList = document.getElementById('layer-selector')
                    for (var i = 0; i < scope.metadata.band_descriptions.length; i++) {
                        let l = document.createElement('option')
                        l.value = scope.metadata.band_descriptions[i][1]
                        l.setAttribute('data-indexes', scope.metadata.band_descriptions[i][0].toString())
                        l.text = scope.metadata.band_descriptions[i][1]
                        layerList.appendChild(l)
                    }

                    // remove loader
                    document.getElementById('loader').classList.toggle('off')
                    document.getElementById('hide-arrow').classList.toggle('off')
                    document.getElementById('menu').classList.toggle('off')

                    const bounds = scope.metadata.bounds
                    const ll = truncate_lnglat(bounds[0], bounds[1])
                    const ur = truncate_lnglat(bounds[2], bounds[3])
                    map.fitBounds([ll, ur])

                    addAOI(bounds)

                    switchViz()
                })
                .catch(err => {
                    console.warn(err)
                })
        })

    </script>

</body>

</html>