import { Component, Injectable,ViewChild,AfterViewInit} from '@angular/core';
import { Feature } from 'ol';
import * as extent from 'ol/extent';
import * as render from 'ol/render';
import { Store } from '@ngrx/store';
import * as mapReducers from '../../reducers/map.reducer';
import { commonReducers,ItemTypeService,AppConfig } from '@farmmaps/common';
import { AbstractFeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
import { ForItemType } from '../for-item/for-itemtype.decorator';
import {getArea} from 'ol/sphere';
import * as style from 'ol/style';


@ForItemType("vnd.farmmaps.itemtype.cropfield")
@Injectable()
@Component({
  selector: 'fm-map-feature-list-feature-cropfield',
  templateUrl: './feature-list-feature-cropfield.component.html',
  styleUrls: ['./feature-list-feature-cropfield.component.scss']
})
export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFeatureComponent implements AfterViewInit {

  @ViewChild('canvas', { static: false }) canvas;
  @ViewChild('container', { static: false }) container;

  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService,config:AppConfig) {
    super(store, itemTypeService,config);
  }

  areaInHa(feature:Feature):number {
    if(!feature) return 0;
    // get area from faeture if 0 calculate from polygon
    let a = feature.get('area');
    if(a) return a;
    return  getArea(feature.getGeometry(),{projectio:"EPSG:3857"}) / 10000;
  }

  scaleCanvas(canvas, context, width, height) {
    // assume the device pixel ratio is 1 if the browser doesn't specify it
    const devicePixelRatio = window.devicePixelRatio || 1;
  
    // determine the 'backing store ratio' of the canvas context
    const backingStoreRatio = (
      context.webkitBackingStorePixelRatio ||
      context.mozBackingStorePixelRatio ||
      context.msBackingStorePixelRatio ||
      context.oBackingStorePixelRatio ||
      context.backingStorePixelRatio || 1
    );
  
    // determine the actual ratio we want to draw at
    const ratio = devicePixelRatio / backingStoreRatio;
  
    if (devicePixelRatio !== backingStoreRatio) {
      // set the 'real' canvas size to the higher width/height
      canvas.width = width * ratio;
      canvas.height = height * ratio;
  
      // ...then scale it back down with CSS
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';
    }
    else {
      // this is a normal 1:1 device; just scale it simply
      canvas.width = width;
      canvas.height = height;
      canvas.style.width = '';
      canvas.style.height = '';
    }
  
    // scale the drawing context so everything will work at the higher ratio
    context.scale(ratio, ratio);
  }

  render(canvas,width,height,feature:Feature) {  
    let canvasContext = canvas.getContext( '2d',{width:width,height:height});      
    this.scaleCanvas(canvas,canvasContext,width,height);
    let renderContext = render.toContext(canvasContext);  
   
    let strokeStyle  = new style.Style({
      stroke: new style.Stroke({ color: 'black',width:1.5 })
    });

    let geom   = feature.getGeometry().clone(),
        line   = geom.getCoordinates()[0],
        e = extent.boundingExtent( line );

    let dxy = extent.getCenter(e),
        sxy = [ 
            (width - 2 ) / extent.getWidth(e),
            (height -2 ) / extent.getHeight(e)
        ];

    let dx = dxy[0], 
        dy = dxy[1],
        sx = sxy[0],
        sy = sxy[1];

    geom.translate( -dx, -dy );
    geom.scale( Math.min(sx, sy), -Math.min(sx, sy));
    geom.translate( width / 2, height / 2 );

    renderContext.setStyle( strokeStyle );  
    renderContext.drawGeometry( geom );
  }

  ngAfterViewInit() {
    this.render(this.canvas.nativeElement,
                this.container.nativeElement.offsetWidth, 
                this.container.nativeElement.offsetHeight,
                this.feature);
  }  
}