import * as React from 'react';
import * as $ from 'jquery';
import {Zoomooz, Loc} from './Zoomooz';
const Izoomooz = new Zoomooz();
export interface OffsetControlProps{
    style?:React.CSSProperties;
    id?:string;
    onClick:(e:React.MouseEvent)=>void;
}
export interface OffsetControlState{
    output:string;
}
let index = 0;
export class OffsetControl extends React.Component<OffsetControlProps, OffsetControlState>{
    id:string;
    constructor(props){
        super(props);
        this.state = {output:''};
        this.id = this.props.id ? this.props.id : (++index).toString();
    }
    componentDidMount(){
        let offset = $(`#${this.id}`).offset();
        this.setState({output:`left:${offset!.left}, top:${offset!.top}`});
    }
    click(e:React.MouseEvent){
        this.props.onClick(e);
    }
    zoomOut(e:React.MouseEvent){
        let zoomTarget =$('#zoomHolder2');
        Izoomooz.zoomTo(zoomTarget, {targetSize:1, duration:3000, nativeAnimation:true, completion:1, navOffset:new Loc(0,0), easing:'ease'});  
       
    }
    render(){
        return <div>
            <button onClick={this.zoomOut.bind(this)}>Zoom Out</button>
            <div style={this.props.style} id={this.id} onClick={this.click.bind(this)}>{this.state.output}</div>
            </div>;
    }
}