import { Component, Input, OnInit,ViewChild } from '@angular/core';
import { Feature} from 'ol';
import { Geometry } from 'ol/geom';
import * as extent from 'ol/extent';
import * as render from 'ol/render';
import * as style from 'ol/style';

@Component({
  selector: 'fm-map-feature-thumbnail',
  templateUrl: './feature-thumbnail.component.html',
  styleUrls: ['./feature-thumbnail.component.scss']
})
export class GeometryThumbnailComponent implements OnInit {

  constructor() { }

  @ViewChild('canvas') canvas;
  @ViewChild('container') container;
  @Input('feature') feature:Feature<Geometry>;

  ngOnInit(): void {
  }

  render(canvas,width,height,geometry:Geometry) {  
    let renderContext = render.toContext(canvas.getContext( '2d'),{ size: [width, height] });  
   
    let strokeStyle  = new style.Style({
      stroke: new style.Stroke({ color: 'black',width:1.5 })
    });

    let geom   = geometry.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.getGeometry());
  }  
}