import 	{	
			Component,
			NgModule,
		}											from '@angular/core'

import	{
			QuestionnaireModule,
			QueryControl
		}											from '@rcc/features'
import 	{ 	
			SharedModule,
			WidgetComponent,
			provideWidget						
		} 											from '@rcc/common'




@Component({
	template:   `
					<p>---The example widget starts here---</p>

					<section>
						<h3>This is the question data:</h3>
						<pre>{{this.queryControl.question|json}}</pre>
					</section>

					<ion-item lines = "full">
						<ion-input			
							[type]			= "queryControl.question.type == 'string' ? 'text' : 'number'" 
							[formControl] 	= "queryControl.answerControl"
							[debounce] 		= "500"
						></ion-input>  
					</ion-item>

					<p>---The example widget ends here---</p>
				`
})
export class ExampleWidgetComponent extends WidgetComponent<QueryControl> {

	static controlType = QueryControl

	static widgetMatch( queryControl: QueryControl ){ 

		return 	queryControl.question.tags?.includes('rcc-example-question') 
				?	2 
				:	-1 

	}

	constructor( 
		public queryControl: QueryControl
	){
		super(queryControl)




	}

}





@NgModule({
	imports: [
		SharedModule,
		QuestionnaireModule,	
	],
	providers:[
		provideWidget(ExampleWidgetComponent)
	],
	declarations:[		
		ExampleWidgetComponent
	],
	exports: [
		ExampleWidgetComponent
	]
})
export class ExampleQueryWidgetsModule {}