import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import ImageLayer from 'ol/layer/Image';
import GeoJSON from 'ol/format/GeoJSON';
import {Circle as CircleStyle, Fill, Stroke, Style, Text, Icon} from 'ol/style';
import MapProperties from './MapProperties';
import GeoTIFFSource from 'ol/source/GeoTIFF';
import ImageStatic from 'ol/source/ImageStatic';
import TileLayer from 'ol/layer/WebGLTile';
import colormap from 'colormap';
import axios from 'axios';
import Projection from 'ol/proj/Projection';

export default class AvgLayer{

    private layer: any = new ImageLayer();
    private mapProperties: MapProperties;
    constructor(mapProperties: MapProperties){
        this.mapProperties = mapProperties;
        var tilesInfoUrl: string = "http://127.0.0.1:42000/raster?years=2010-2018&ramp=[[255,255,255,1],[255,244,191,1],[255,233,128,1],[255,221,64,1],[255,210,0,1],[243,105,0,1],[230,0,0,1],[153,0,0,1],[77,0,0,1],[0,0,0,1]]";
/* 
        axios(tilesInfoUrl)
            .then(res=>{
                var meta: JSON = res.data; */

        /* const extent = [0, 0, 1024, 968];
        const projection = new Projection({
            code: 'xkcd-image',
            units: 'pixels',
            extent: extent,
        });           


        let source = new ImageStatic({
            attributions: '© <a href="https://xkcd.com/license.html">xkcd</a>',
            url: 'https://imgs.xkcd.com/comics/online_communities.png',
            projection: projection,
            imageExtent: extent,
          }) */

          axios.get(tilesInfoUrl, {
            headers: {'Access-Control-Allow-Origin': '*'}
        }).then(resp => {
            console.log("TILES INFO LOADED");

            /* let source = new GeoTIFFSource({
                sources: [{
                    url: tilesInfoUrl,
                    bands: [0],
                    min: 0,
                    nodata: 0,
                    max: 65535
                }]            
            })
        
        
            this.layer.setSource(source); */
        });

        
    }


    public getLayer(): any{
        return this.layer;
    }

}