import * as React from 'react';
import { expect } from 'chai';
///var mocha = require('mocha');

 // var assert = require('chai').assert
 
// @ts-ignore
//import * as zoomooz from './libIndex';
import './App.css';
// @ts-ignore
import * as $ from 'jquery';
import { OffsetControl } from './OffsetControl';
import {Zoomooz, Loc} from './Zoomooz';
import { tween, easing } from 'popmotion';
const Izoomooz = new Zoomooz();
type MyState = { settings: object };

class App extends React.Component<{}, MyState> {
    public test(e:any, settings: object)
    {
  //      Izoomooz.zoomTo("." + e.target.className, settings, null);
    }
    public zoomTo(e:React.MouseEvent){

        //alert('zooming to');
        let target:any = e.target;
    //    Izoomooz.zoomTo(`#${target.id}`, {targetsize:.1,scalemode:'both', duration:5000, easing:'ease', nativeanimation:false, navOffset:{x:0,y:0}}, null);
    }
    public success(){
        $('#test').html('Success');
    }
    public testRootOffset(){ 
        let rootOffsets =  Izoomooz.getRootOffsets($('#root')[0]);
        expect(rootOffsets.Left).to.equal(10);
        expect(rootOffsets.Top).to.equal(10);
        $('#test').html('Success');
        }
    public testWholeOffset(){
        let zoomTarget =$('#zoomTarget');
        let position = Izoomooz.computeActualPosition(zoomTarget[0], $('#root')[0]);  
        expect(Math.ceil(zoomTarget.offset()!.top)).to.equal(Math.ceil(position.Top));
        expect(Math.ceil(zoomTarget.offset()!.left)).to.equal(Math.ceil(position.Left));
        $('#test').html('Success');
    }
    public testZoom(){
        let zoomTarget =$('#zoomTarget');
        let callback = App.testZoom2;
        Izoomooz.zoomTo(zoomTarget, {targetSize:1, duration:10000, nativeAnimation:false, completion:1, navOffset:new Loc(0,0), easing:'ease', /*animationCompleted:callback,*/ 
        popMotionSettings:{ popMotionAction:(start, end)=>
        tween({from:{scaleX:start.scaleX, scaleY:start.scaleY, translateX:start.translateX, translateY:start.translateY}, to:{scaleX:end.scaleX, scaleY:end.scaleY, translateX:end.translateX, translateY:end.translateY},
            duration:4000, ease:easing.anticipate
        })
        }});  
    }
    static testZoom2(){
        let zoomTarget =$('#zoomHolder2');
        let callback = App.testZoom3;
        Izoomooz.zoomTo(zoomTarget, {targetSize:1, duration:3000, nativeAnimation:false, completion:1, navOffset:new Loc(0,0), easing:'ease', animationCompleted:[callback]});  
    }
    static testZoom3(){
        let zoomTarget =$('#zoomHolder2');
        let callback = App.resetZoom;
        Izoomooz.zoomTo(zoomTarget, {targetSize:1, duration:3000, nativeAnimation:false, completion:1, navOffset:new Loc(40,40), easing:'ease', animationCompleted:[callback]});  
    }
   public runFailTest(){
       expect('').to.be.null;   
   }
   static resetZoom(){
        Izoomooz.Reset({ duration:3000, nativeAnimation:false, easing:'ease'})
   }
   public resetZoom(){
    App.resetZoom();
}
    public render() {
      //  let zoomHolderStyle:React.CSSProperties = {position:'relative',left:'50px',padding:'10px',top:'10px',margin:'15px'};
      let zoomHolderStyle:React.CSSProperties = { margin:'0px', borderWidth:10,borderStyle:'dotted', padding:'10px', transform:'translateX(0px) translateY(0px) scaleX(1) scaleY(1)'};
    //  let zoomStyle:React.CSSProperties = { left:20, borderWidth:10,borderStyle:'dotted'};
      return (
            <div style={{margin:'0px'}}>
                <div id="zoomHolder" style={zoomHolderStyle}>hello<br/>yeah doggy
                <div id="zoomHolder2" style={{padding:'10px',margin:'50px', width:'200px',borderWidth:10,borderStyle:'solid',
                transform:'translateX(0px) translateY(0px) scaleX(1) scaleY(1)'}}>Zoom Holder 2
                    <OffsetControl id ="zoomTarget" style={{ borderStyle:'dotted', borderWidth:10, left:'25px', position:'relative',margin:'40px'}} onClick={this.resetZoom.bind(this)}/>
                </div>
                <button onClick={this.testWholeOffset} id="test">Test</button>
                <button onClick={this.testZoom} id="testZoom">Zoom</button>
                </div>
            </div>
        );
    }
}

export default App;