import panelRow 					from '/elements/panel/row.js';

import label 						from '/elements/label.js';


class animationBlock{

	width			= 100;

	height			= 100;

	margin			= 20;

	background		= "#03a9f4";

	create() {

		this.animation = this.createAnimation("rotateAnimation");

		var key = this.animation.createKeyFrame( 0 );

		key.setProperty( "skewX", "0deg" );


		var key = this.animation.createKeyFrame( 20 );

		key.setProperty( "skewX", "14deg" );


		var key = this.animation.createKeyFrame( 60 );

		key.setProperty( "skewX", "52deg" );


		var key = this.animation.createKeyFrame( 100 );

		key.setProperty( "skewX", "0deg" );

	}

	async click() {

		this.animation.play("2s");

	}

}


class rowLabel extends label{

	flex = "1";

} 


export default class row extends panelRow{

	boxWidth			= "95%"

	rowLabel			= new rowLabel("skewX");

	animationBlock		= new animationBlock();

}