export class FbConfirmBox extends google.maps.OverlayView {
    /* tslint:disable */
    latLng_: google.maps.LatLng; 
    map_: google.maps.Map;
    div_: HTMLElement = null;
    cancelCallback_: Function;
    okCallback_: Function;
    /* tslint:enable */

    constructor(map: google.maps.Map,
        latLng: google.maps.LatLng,
        okCallback: Function,
        cancelCallback: Function
    ) {
        super();

        this.map_ = map;
        this.latLng_ = latLng;
        this.okCallback_ = okCallback;
        this.cancelCallback_ = cancelCallback;

        this.setMap(map);
    }

    destroy(): void {
        this.setMap(null);
    }

    onAdd(): void {
        const div: HTMLDivElement = document.createElement('div');
        div.style.height = '100px';
        div.style.width = '240px';
        div.style.background = 'white';
        div.style.borderRadius = '12px';
        div.style.position = 'absolute';
        div.style.padding = '20px';
        div.style.fontSize = '12px';
        div.style.boxSizing = 'border-box';

        const arrow: HTMLDivElement = document.createElement('div');
        arrow.style.width = '0';
        arrow.style.height = '0';
        arrow.style.borderLeft = '15px solid transparent';
        arrow.style.borderRight = '15px solid transparent';
        arrow.style.borderTop = '15px solid white';
        arrow.style.position = 'absolute';
        arrow.style.bottom = '-15px';
        arrow.style.left = '112.5px';

        const p: HTMLParagraphElement = document.createElement('p');
        p.innerHTML = 'Vill du flytta objektets position hit?';

        const btnOk: HTMLButtonElement = document.createElement('button');
        btnOk.innerHTML = 'Ja';
        btnOk.className = 'btn btn-primary btn-sm pull-left';
        btnOk.addEventListener('click', evt => {
            evt.stopPropagation();
            this.okCallback_();
            this.onRemove();
        });

        const btnCancel: HTMLButtonElement = document.createElement('button');
        btnCancel.innerHTML = 'Ångra';
        btnCancel.className = 'btn btn-primary btn-sm pull-right';
        btnCancel.addEventListener('click', evt => {
            evt.stopPropagation();
            this.cancelCallback_();
            this.onRemove();
        });

        div.appendChild(p);
        div.appendChild(btnOk);
        div.appendChild(btnCancel);
        div.appendChild(arrow);
        this.getPanes().overlayMouseTarget.appendChild(div);
        this.div_ = div;
    }

    draw(): void {
        const overlayProjection: google.maps.MapCanvasProjection = this.getProjection();
        const pixelPosition: google.maps.Point = overlayProjection.fromLatLngToDivPixel(this.latLng_);
        // Resize the image's div to fit the indicated dimensions.
        const div: HTMLElement = this.div_;
        if (div) {
            div.style.left = (pixelPosition.x - 130) + 'px';
            div.style.top = (pixelPosition.y - 160) + 'px';
        }
    }

    onRemove(): void {
        if (this.div_) {
            this.div_.parentNode.removeChild(this.div_);
            this.div_ = null;
        }
    }
}