<template>

	<div id='HEADER'>

		<!-- Department management -->
		<div class='departments' data-unblur-department>

			<div class='current' @click='d_dialog=!d_dialog' data-unblur-department>{{ get_dcurrent().label || 'département à jour' }}</div>
			<div class='department-dialog' v-show='d_dialog' data-unblur-department>
				<span v-for='d in dpts' v-show='d.id!=dep_id' @click='d_switch(d.id)' data-unblur-department>{{ d.label }}</span>
			</div>

		</div>

		<!-- Version management -->
		<div class='versions' data-unblur-version>

			<div class='current' @click='version.dialog=!version.dialog' :data-id='get_vcurrent().id' data-unblur-version>{{ get_vcurrent().name }}</div>

			<div class='version-dialog' v-show='version.dialog' data-unblur-version>
				<span v-for='(v,i) in version.list' v-show='v.id!=version.current' :data-id='v.id' data-unblur-version>
					<span :class='v.name==v.new_name?`switch`:`edit`' @click='v.name==v.new_name?v_switch(v.id):v_rename(i)'></span><input data-unblur-version type='text' :placeholder='v.name' v-model='v.new_name'>
				</span>
				<span @click='v_create()' data-unblur-version data-id='-1'><span class='create'></span>Créer</span>
			</div>

		</div>
			<!-- <div class='header-title'>{{ gstore.header_title }}</div> -->

	</div>

</template>


<script>
export default {
	name: 'HEADER',
	data(){
	    return {
	        gstore:			gstore.get,
			is_connected:	_SERVER.session.connected,

			d_dialog: false,
			dep_id:   _SERVER.session.department_id,
			dpts:     _SERVER.session.departments,

			version: {
				dialog:  false,
				current: -1,
				list:    []
			}
	    };
	},
	methods: {

		/* (1) Get current department data
		---------------------------------------------------------*/
		get_dcurrent(id){

			// use @dep_id, if invalid argument @id
			( isNaN(id) ) && ( id = this.dep_id );

			// search in @dpts where id is @dep_id
			for( var d in this.dpts )
				if( this.dpts[d].id == id )
					return this.dpts[d];

			return { id: null, label: null };

		},

		/* (2) Get current version data
		---------------------------------------------------------*/
		get_vcurrent(id){

			// use @version.current, if invalid argument @id
			( isNaN(id) ) && ( id = this.version.current );

			// search in @ist where id is @id
			for( var v in this.version.list )
				if( this.version.list[v].id == id )
					return this.version.list[v];

			return { id: -2, name: '-', new_name: '-' };

		},

		/* (3) Switch to other department
		---------------------------------------------------------*/
		d_switch(id){

			// 1. De-activate dialogs
			this.d_dialog = false;
			this.version.dialog = false;

			// 2. Do nothing if no change
			if( this.dep_id == id )
				return;

			// 3. Ask for department change
			api.call(`PUT department/${id}`, {}, function(rs){

				// 1. error -> do nothing
				if( rs.error !== 0 || rs.switched !== true )
					return;

				// 2. Update GUI
				this.dep_id = id;

				// 3. Reload page if needed
				setTimeout(() => { document.location = ''; }, 200);

			}.bind(this));

		},

		/* (4) Switch to other version
		---------------------------------------------------------*/
		v_switch(id){

			// 1. De-activate dialogs
			this.d_dialog = false;
			this.version.dialog = false;

			// 2. Do nothing if no change
			if( this.version.current == id )
				return;

			// 3. Ask for department change
			api.call(`GET department/version/switch/${id}`, {}, function(rs){

				// 1. error -> do nothing
				if( rs.error !== 0 )
					return;

				// 2. Update GUI
				this.version.current = id;

				// 3. Reload page if needed
				setTimeout(() => { document.location = ''; }, 200);

			}.bind(this));

		},

		/* (5) Create a new version from now
		---------------------------------------------------------*/
		v_create(){

			// 1. De-activate dialogs
			this.d_dialog = false;
			this.version.dialog = false;

			// 2. Popup confirm
			(new Promise( (resolve, reject) => {

				popup.ask({
					title:   'Confirmation de création de version',
					content: `Une sauvegarde (ou version) va être crée à partir de l'état actuel des données de tout le département<br><br>Voulez-vous créer cette sauvegarde ?`,
					action:  'Créer',
					type:    'valid'
				}, (popup_rs) => { popup_rs && resolve() });

			// 3. On popup confirm
			})).then( () => {

				let newVersionName = `${this.get_vcurrent().name}*`;
				// Call API to create a new version
				api.call(`POST department/version/`, {label:newVersionName}, function(rs){

					// 1. error -> popup
					if( rs.error !== 0 || !rs.hasOwnProperty('created_id') ){

						return popup.ask({
							title:   'Erreur ('+err_code+')',
							content: 'La création de version à échoué.',
							action:  'OK',
							type:    'neutral'
						}, () => {});

					}

					// 3. Update GUI
					this.version.list.push( { id: parseInt(rs.created_id), name: newVersionName, new_name: newVersionName } );

				}.bind(this));

			});

		},

		/* (6) Rename a version
		---------------------------------------------------------*/
		v_rename(index){

			// fail if not found index
			if( this.version.list[index] == null )
				return;

			var ver = this.version.list[index];
			var newname = ver.new_name;

			// 2. Popup confirm
			(new Promise( (resolve, reject) => {

				popup.ask({
					title:   'Confirmation de modification de version',
					content: `La version <b>${ver.name}</b> va être renommée en <b>${newname}</b><br><br>Voulez-vous valider cette modification ?`,
					action:  'Valider',
					type:    'valid'
				}, (popup_rs) => { popup_rs && resolve() });

			// 3. On popup confirm
			})).then( () => {

				// Call API to create a new version
				api.call(`PUT department/version/${ver.id}`, {label:newname}, function(rs){

					// 1. error -> popup
					if( rs.error !== 0 || !rs.hasOwnProperty('updated') ){

						return popup.ask({
							title:   'Erreur ('+err_code+')',
							content: 'La modification a échoué.',
							action:  'OK',
							type:    'neutral'
						}, () => {});

					}

					// 3. Update GUI
					ver.name = newname;
					ver.new_name = newname;

				}.bind(this));

			})

		}

	},

	beforeMount(){

		/* (1) Try to fetch versions from API */
		api.call('GET department/version', {}, function(rs){

			// 1. Manage error
			if( rs.error !== 0 || !rs.hasOwnProperty('versions') )
				return;

			// 2. Init version list
			this.version.list = [];

			// 3. Store versions
			for( var ver of rs.versions ){

				// if current version -> set @version.current
				if( _SERVER.session.version.current === ver.iddatabase )
					this.version.current = ver.iddatabase

				// add version to list
				this.version.list.push( { id: ver.iddatabase, name: ver.label, new_name: ver.label } );

			}

			this.version

		}.bind(this) );



		/* (2) Set onblur to hide department lists */
		window.onblur.link('header.department', (e) => {

			// only hide not [data-unblur-department] elements
			if( e.target.getAttribute('data-unblur-department') === null )
				this.d_dialog = false;

			// only hide not [data-unblur-version] elements
			if( e.target.getAttribute('data-unblur-version') === null )
				this.version.dialog = false;

		});

	}
}
</script>