import { Validators } from '@angular/forms';
import { ValueTransformer } from './../interfaces';

// ---------------------------------------------------------------------------------------------------------------------
// Native

const basicTextField = {
	type: 'Text',
	label: 'Field One',
	placeholder: 'Type a value here'
};

const styledTextField = {
	type: 'Text',
	placeholder: 'With a DOM id and CSS classes applied',
	class: ['red', 'bgPaleBlue'],
	id: 'yoyo'
};

const textareaField = {
	type: 'Textarea',
	placeholder: 'Type your long-winded comments here'
};

const passwordField = {
	type: 'Password',
	placeholder: 'It\'s a secret'
};

const selectField = {
	type: 'Select',
	options: ['', 'Apples', 'Oranges', 'Pears', 'Gorgonzola']
};

const radioField = {
	type: 'radio',
	options: ['Tea', 'Coffee', 'Cocoa', 'Yerba Maté'],
	validators: [ Validators.required ],
};

const disabledTextField = {
	type: 'Text',
	placeholder: 'You can\'t touch this',
	isDisabled: true
};

const radioFieldHorizontal = {
	type: 'radio',
	options: ['Fish', 'Fowl', 'Neither'],
	horizontal: true
};


// ---------------------------------------------------------------------------------------------------------------------
// Custom

const checkbutton = {
	type: 'checkbutton',
	value: '456'
};

const checkbutton2 = {
	type: 'checkbutton',
	value: 'Yowsa'
};

const modifiers = ['Matches', 'Starts With', 'Contains'];
const transformerFunctions: ValueTransformer = {
	inputFn: val => {
		let modifier = 'Starts With';
		if (/^%.*?%$/.test(val)) {
			modifier = 'Contains';
		} else if (/^[^%].*?[^%]$/.test(val)) {
			modifier = 'Matches';
		} else if (/^%.*/.test(val)) {
			modifier = 'Starts With';
		}
		const transformedVal = val.replace(/%/g, '').trim();
		return { modifier: modifier, value: transformedVal };
	},
	outputFn: (mod, val) => {
		let transformedValue;
		switch (mod) {
			case 'Starts With':
				transformedValue = `%${val}`;
				break;
			case 'Contains':
				transformedValue = `%${val}%`;
				break;
			case 'Matches':
			default:
				transformedValue = val;
				break;
		}
		return transformedValue;
	}
};
const dropdownModifiedInput = {
	type: 'dropdownModifiedInput',
	value: 'lovely',
	modifiers,
	transform: transformerFunctions
};

const checkbuttonGroup = {
	type: 'CheckbuttonGroup',
	firstEnablesRest: true,
<<<<<<< HEAD
	meta: { iMaskTheOthers: {}, groupMemberTwo: {}, groupMemberThree: {} }
};



=======
	meta: [{name: 'iMaskTheOthers'}, {name: 'groupMemberTwo'}, {name: 'groupMemberThree'}]
};


>>>>>>> a3dfe85e06beb3d977f49241b2360bb3e2f4a09d
// ---------------------------------------------------------------------------------------------------------------------
// Kendo

const timepicker = {
	type: 'timepicker'
};

const datepicker = {
	type: 'datepicker'
};

// ---------------------------------------------------------------------------------------------------------------------
// Container

const basicTextField2 = {
	type: 'Text',
	label: 'Required Field',
	validators: [ Validators.required, Validators.minLength(4) ],
};

<<<<<<< HEAD
const checkbuttonGroupArray = {
	type: 'CheckbuttonGroup',
	firstEnablesRest: false,
	showAllOrNone: true,
	meta: [
		{name: 'One', value: 111}, {name: 'Two', value: 222}, {name: 'Three', value: 333}, {name: 'Four', value: 444},
		{name: 'Five', value: 555}, {name: 'Six', value: 666}, {name: 'Seven', value: 777}, {name: 'Eight', value: 888}
	]
=======
const checkbuttonGroup2 = {
	type: 'CheckbuttonGroup',
	firstEnablesRest: true,
	meta: [{name: 'One'}, {name: 'Two'}, {name: 'Three'}]
>>>>>>> a3dfe85e06beb3d977f49241b2360bb3e2f4a09d
};

const container = {
	type: 'Container',
	meta: {
		basicTextField2,
<<<<<<< HEAD
		checkbuttonGroupArray
=======
		checkbuttonGroup2,
>>>>>>> a3dfe85e06beb3d977f49241b2360bb3e2f4a09d
	}
};

// ---------------------------------------------------------------------------------------------------------------------

const model = {};

const meta = {
	basicTextField,
	styledTextField,
	textareaField,
	passwordField,
	selectField,
	radioField,
	disabledTextField,
	radioFieldHorizontal,
	checkbutton,
	dropdownModifiedInput,
	checkbuttonGroup,
	timepicker,
	datepicker,
	container
};

export { model, meta };