(async function( $ ) {
	/**
	 * global variables
	 */
	let tablePojoInfo = {};



	/**
	 * pascal case to underscore
	 */
	let pascalCaseToUnderscore = function( str ) {
		return str.replace( /(?:^|\.?)([A-Z])/g, function ( x, y ){ return "_" + y.toLowerCase() }).replace( /^_/,  "" );
	};
	



	/**
	 * caching dom elements
	 */
	let $body = $( 'body' ),
		$formDb = $( '[data-schema-form]' ),
		$inputDbName = $( '[data-db-name]' ),
		$inputDbUser = $( '[data-db-user]' ),
		$inputDbPass = $( '[data-db-password]' ),
		$inputDbHost = $( '[data-db-host]' ),
		$inputDbPort = $( '[data-db-port]' ),
		$inputClassPath = $( '[data-class-path]' ),
		$inputBasePackage = $( '[data-base-package]' ),
		$inputDataSourceType = $( '[data-source-type]' ),
		$inputDataSourceName = $( '[data-source-name]' ),
		$formGenerateDAO = $( '[data-generate-dao-form]' ),
		$btnScrollBottom = $( '[data-scroll-bottom]' );



	/**
	 * populate table attribute options
	 */
	let populateTableAttributeOptions = function( table, modelProperty ) {
		let str = '<option value="">PLEASE SELECT RESPECTIVE ATTRIBUTE</option>';
		for ( attribute in tablePojoInfo.schemaInfo[table] ) {
			let selected = ( attribute === pascalCaseToUnderscore( modelProperty ) ? "selected" : "" );
			str += `<option value="${attribute}" data-attribute-type="${tablePojoInfo.schemaInfo[table][attribute]}" ${ selected }>${attribute}</option>`;
		}

		return str;
	};



	/**
	 * populate table attributes on table select
	 */
	$body.on( 'change', '[data-select-table]', function( e ) {
		let $selectTable = $( this ),
			$row = $selectTable.closest( '[data-pojo-table-mapping]' ),
			$attributesContainer = $row.find( '[data-attributes]' ),
			$attributeSelects = $attributesContainer.find( '[data-table-attribute]' ),
			table = $selectTable.val();

		$row.attr( 'data-pojo-table-mapping', `${$row.attr('data-pojo')}:${table}` );

		if ( table === '' ) {
			// $attributesContainer.hide();
			return;
		}

		$attributeSelects.each(function() {
			let $attributeSelect = $( this );
			let modelProperty = $attributeSelect.closest( '[data-attribute-name]' ).attr( 'data-attribute-name' );
			$attributeSelect.html( populateTableAttributeOptions( table, modelProperty ) );
		});

		// $attributesContainer.show();
	});



	/**
	 * show attributes if enabled
	 */
	$body.on( 'change', '[name="enabled"]', function( e ) {
		let $checkboxEnabled = $( this ),
			$containerAttributes = $checkboxEnabled.closest( '[data-pojo-table-mapping]' ).find( '[data-attributes]' );

		if ( $checkboxEnabled.prop( 'checked' ) ) {
			$containerAttributes.show();
		} else {
			$containerAttributes.hide();
		}
	});



	/**
	 * create map-tables-pojos payload
	 */
	let createMapTablesPojosPayload = function() {
		return {
			dbConfig: {
				host: $inputDbHost.val(),
				port: parseInt( $inputDbPort.val() ),
				user: $inputDbUser.val(),
				password: $inputDbPass.val(),
				database: $inputDbName.val(),
				insecureAuth: true
			},
			classpath: $inputClassPath.val()
		};
	};



	/**
	 * function to generate option for each pojo
	 */
	let createTableOptions = function( pojo ) {
		let str = '<option value="">Select Table</option>';
		for ( table in tablePojoInfo.schemaInfo ) {
			str += `<option value="${table}" ${ table === pascalCaseToUnderscore( pojo ) ? "selected" : "" }>${table}</option>`;
		}
		return str;
	};



	/**
	 * function to create entries for attribute mapping
	 */
	let createAttributeMapping = function( pojo ) {
		let str = '';

		for ( attribute in tablePojoInfo.pojoInfo[pojo] ) {
			str += `
				<div class="form-row" data-attribute-name="${attribute}" data-attribute-type="${tablePojoInfo.pojoInfo[pojo][attribute]}">
					<div class="col-sm-6">
						<code>${attribute}</code>
					</div>
					<div class="col-sm-6">
						<select class="form-control form-control-sm" data-table-attribute></select>
					</div>
				</div>
			`;
		}

		return str;
	};



	/**
	 * function to create rows for each table
	 */
	let createPojoRow = function( pojo ) {
		let str = `
			<div class="bg-light p-3 my-3" data-pojo-table-mapping="${pojo}:" data-pojo="${pojo}">
				<div class="form-row">
					<div class="form-group col-sm-6">
						<h4>
							<input type="checkbox" name="enabled" id="${pojo}" value="1" />
							<label for="${pojo}"><code>${pojo}</code></label>
						</h4>
					</div>
					<div class="form-group col-sm-6">
						<select class="form-control" data-select-table>${createTableOptions( pojo )}</select>
					</div>
				</div>
				<div data-attributes style="display:none;">
					${createAttributeMapping( pojo )}
				</div>
			</div>
		`;
		return str;
	};



	/**
	 * function to create html string for table-pojo mapping form
	 */
	let createTablePojoMappingHTMLStr = function( results ) {
		let htmlStr = '';
		// iterate over each table and get the string
		for ( pojo in tablePojoInfo.pojoInfo ) {
			htmlStr += createPojoRow( pojo );
		}
		return htmlStr;
	};



	/**
	 * map table-pojo form submit
	 */
	$formDb.on( 'submit', async function( e ) {
		e.preventDefault();
		// hide mapping form
		$formGenerateDAO.hide();
		// send the request
		tablePojoInfo = await $.post( 'http://localhost:3001/map-tables-pojos', createMapTablesPojosPayload() );
		// show mapping form
		$formGenerateDAO.show();
		// create html string for mapping form
		$formGenerateDAO.find( '[data-mapping-area]' ).html( createTablePojoMappingHTMLStr( tablePojoInfo ) );
		// trigger change on all table selects
		$( '[data-select-table]' ).each(function( i ) {
			$( this ).trigger( 'change' );
		});
	});



	/**
	 * function to prepare model package
	 */
	let prepareModelPackage = function() {
		return $inputClassPath.val().replace( /\\/g, '.' ).split( 'classes.' )[1];
	};



	/**
	 * function to prepare pojo-table mapping
	 */
	let preparePojoTableMapping = function() {
		let pojoTableMappingPayload = {};
		pojoTableMappingPayload['dataSourceName'] = $inputDataSourceName.val();
		pojoTableMappingPayload['dataSourceType'] = $inputDataSourceType.val();
		pojoTableMappingPayload['databaseName'] = $inputDbName.val();
		pojoTableMappingPayload['modelPackage'] = prepareModelPackage();
		pojoTableMappingPayload['basePackage'] = $inputBasePackage.val();
		pojoTableMappingPayload['pojoTableMapping'] = [];

		$( '[data-pojo-table-mapping]' ).each(function() {
			let $row = $( this ),
				$checkboxEnabled = $row.find( '[name="enabled"]' ),
				pojo = $row.attr( 'data-pojo' ),
				table = $row.attr( 'data-pojo-table-mapping' ).split( ':' )[1];

			if ( '' === table ) {
				return;
			}

			if( ! $checkboxEnabled.prop( 'checked' ) ) {
				return;
			}

			let obj = {};
			obj['pojoName'] = pojo;
			obj['tableName'] = table;
			obj['attributes'] = [];

			$row.find( '[data-attributes] [data-attribute-name]' ).each(function() {
				let attr = {};
				let $attr = $( this );
				attr['pojoAttribute'] = $attr.attr( 'data-attribute-name' );
				attr['tableAttribute'] = $attr.find( '[data-table-attribute]' ).val();
				attr['pojoAttributeType'] = $attr.attr( 'data-attribute-type' );
				attr['tableAttributeType'] = $attr.find( '[data-table-attribute] option:selected' ).attr( 'data-attribute-type' );
				if ( '' === attr['tableAttribute'] ) {
					return;
				}
				obj['attributes'].push( attr );
			});

			pojoTableMappingPayload['pojoTableMapping'].push( obj );
		});

		return pojoTableMappingPayload;
	};



	/**
	 * generate dao-rowmapper form submit
	 */
	$formGenerateDAO.on( 'submit', async function( e ) {
		e.preventDefault();
		let payload = {
			payload: preparePojoTableMapping()
		};
		let filesCreated = await $.post( 'http://localhost:3001/create-files', payload );
	});


	/**
	 * scroll to bottom
	 */
	$btnScrollBottom.on( 'click', function( e ) {
		e.preventDefault();
		$( 'html, body' ).animate({
			scrollTop: $( document ).height()
		}, 100 );
	});
	

})( jQuery );