<template>
<div style="padding:5px;">
    <h2>Test for selectize</h2>
    <bt-grid cols="3" floater>
        <bt-gridcol><h5>Mega Form</h5></bt-gridcol>
        <bt-gridcol><h5>Normal</h5></bt-gridcol>
        <bt-gridcol><h5>Logs</h5></bt-gridcol>

        <bt-gridcol>
            <bt-selectize id="sel1" :options="GRP_COLORS" v-model="opt1" mega removeButton/>
        </bt-gridcol>
        <bt-gridcol>
            <bt-selectize id="sel2" :options="GRP_COLORS" v-model="opt1" sortKey="label" @select="detectSetChange" :disabled="disableDrop"/>
        </bt-gridcol>
        <bt-gridcol>Single Selected value - {{opt1}} <bt-button @click="disableDrop = !disableDrop">Toggle</bt-button></bt-gridcol>

        <bt-gridcol><bt-selectize id="sel3" :options="GRP_COLORS" v-model="opt1" mega v-validate="'required|max:6'" :message="errors.first('sel3')"/></bt-gridcol>
        <bt-gridcol><bt-selectize id="sel4" :options="[]" v-model="opt1" :searchable="false" v-validate="'required'" :message="errors.first('sel4')"/></bt-gridcol>
        <bt-gridcol>Search Disabled single select</bt-gridcol>

        <bt-gridcol>
            <bt-selectize id="sel5" :options="[]" v-model="opt1" mega :editable="!disableDrop"/>
        </bt-gridcol>
        <bt-gridcol>
            <bt-selectize id="sel6" :options="GRP_COLORS" v-model="opt1" :editable="false"/>
        </bt-gridcol>
        <bt-gridcol>Disabled single select <bt-button @click="dynamicValue">Modify</bt-button></bt-gridcol>

        <bt-gridcol>
            <bt-selectize id="sel7" :options="GRP_COLORS" v-model="opt2" mega multiple/>
        </bt-gridcol>
        <bt-gridcol>
            <bt-selectize id="sel8" :options="GRP_COLORS" v-model="opt2" multiple/>
        </bt-gridcol>
        <bt-gridcol>Multi select - {{opt2}}</bt-gridcol>

        <bt-gridcol>
            <bt-selectize id="sel9" :options="NORMAL_OPTS" v-model="opt3" mega multiple taggable :max="limit"/>
        </bt-gridcol>
        <bt-gridcol>
            <bt-selectize id="sel10" :options="VPN_OPTS" valueKey="vpnName" labelKey="vpnName" v-model="opt31" :multiple="limit > 1" taggable :max="limit" sensitive/>
        </bt-gridcol>
        <bt-gridcol>Multi select taggable - {{opt3}} - {{opt31}}</bt-gridcol>

        <bt-gridcol>
            <bt-selectize id="sel11" :options="USERS" v-model="opt4" mega valueKey="username" labelKey="name" filterKey="username,name,email" :customTemplate="customOne" :sortKey="[]"/>
        </bt-gridcol>
        <bt-gridcol>
            <bt-selectize id="sel12" :options="USERS" v-model="opt4" valueKey="username" labelKey="name" :customTemplate="customTwo" sortKey="username"/>
        </bt-gridcol>
        <bt-gridcol>Custom select - {{opt4}}</bt-gridcol>

        <bt-gridcol>
            <bt-selectize id="sel13" :options="GROUPED_OPTS" v-model="opt5" mega :groups="GRPLIST" :searchable="false" :allowEmpty="false" disabledKey="disabled" :editable="false"/>
        </bt-gridcol>
        <bt-gridcol>
            <bt-selectize id="sel14" :options="GROUPED_OPTS" v-model="opt5" :groups="GRPLIST" :searchable="false" :allowEmpty="false" disabledKey="disabled" @change="detectSetChange"/>
        </bt-gridcol>
        <bt-gridcol>Option grouping value - {{opt5}}</bt-gridcol>

        <bt-gridcol>
            <bt-selectize id="sel15" :options="[]" v-model="opt6" mega multiple valueKey="label" labelKey="label" :allowEmpty="false" returnType="number"/>
        </bt-gridcol>
        <bt-gridcol>
            <bt-selectize id="sel16" :options="GRPLIST" v-model="opt7" :searchable="false" :allowEmpty="false" returnType="number"/>
        </bt-gridcol>
        <bt-gridcol>Option custom return type - {{opt6}} - {{opt7}}</bt-gridcol>
    </bt-grid>
    <router-link to="/">Back to Home</router-link>
</div>

</template>
<script>
import { delay, defer } from 'lodash'
export default {
	name: 'TestSelect',
	inject: ['$validator'],
	data() {
		return {
			limit: 5,
			opt1: 'Auto',
			opt2: 'Teal',
			opt3: null,
			opt31: ['VPN1'],
			opt4: null,
			opt5: 'NONE',
			opt6: ['1100'],
			opt7: 0,
			disableDrop: true,
			NORMAL_OPTS: ['Maroon', 'Olive', 'Ocean', 'Salmon', 'Khaki'],
			VPN_OPTS: [{ vpnId: 2121, vpnName: 'VPN1', displayName: 'IP VPN1' }, { vpnId: 4345, vpnName: 'VPN2', displayName: 'IP VPN2' }, { vpnId: 566, vpnName: 'VPN3', displayName: 'IP VPN3' }],
			VPN_OPTS2: [],
			GRPLIST: [{ value: 0, label: 'New Group' }, { value: 122, label: 'Some Group 1' }, { value: 332, label: 'Some group 2' }, { value: '422', label: 'Some group 4' }],
			GRP_COLORS: [
				{ value: 'Auto', label: 'Auto Default', disabled: false },
				{ value: 'Cafenoir', label: 'Cafe Noir', disabled: false },
				{ value: 'Maroon', label: 'Maroon', disabled: false },
				{ value: 'Indigo', label: 'Indigo', disabled: false },
				{ value: 'Forestgreen', label: 'Forest Green', disabled: false },
				{ value: 'Teal', label: 'Teal', disabled: false },
				{ value: 'Olive', label: 'Olive', disabled: false },
				{ value: 'Ocean', label: 'Ocean', disabled: true },
				{ value: 'Crimson', label: 'Crimson', disabled: false },
				{ value: 'Bronze', label: 'Bronze', disabled: true },
				{ value: 'Cadet', label: 'Cadet', disabled: true },
				{ value: 'Cardinal', label: 'Cardinal', disabled: false },
				{ value: 'Salmon', label: 'Salmon', disabled: false },
				{ value: 'Pink', label: 'Pink', disabled: false },
				{ value: 'Google', label: 'Google', disabled: false },
				{ value: 'Khaki', label: 'Khaki', disabled: false },
				{ value: 'Peachpuff', label: 'Peach Puff', disabled: false },
				{ value: 'Palegreen', label: 'Pale Green', disabled: false },
				{ value: 'Mud', label: 'Mud', disabled: false }
			],
			USERS: [
				{ username: '434342425', name: 'Sandeep K', email: 'sandeep@abdc.com', hasUKPassport: true, cseg: false, betaUser: true },
				{ username: '534534534', name: 'Thangapandi Pandi', email: 'pandi@abcd.com', hasUKPassport: false, cseg: false, betaUser: false },
				{ username: '542344544', name: 'Manas Diyali', email: 'manas@abcd.com', hasUKPassport: false, cseg: false, betaUser: true },
				{ username: '765323423', name: 'Navneeth Nagaraj', email: 'navneeth@abcd.com', hasUKPassport: true, cseg: false, betaUser: false },
				{ username: '533477238', name: 'Shradha Bharti', email: 'shradha@abcd.com', hasUKPassport: false, cseg: false, betaUser: true },
				{ username: '645663483', name: 'Swathi Gurijala', email: 'swathi@abcd.com', hasUKPassport: true, cseg: false, betaUser: false },
				{ username: '323784429', name: 'Shashank Bonthala', email: 'sanki@abcd.com', hasUKPassport: false, cseg: true, betaUser: false },
				{ username: '677578424', name: 'Anuradha Thathapudi', email: 'anu@abcd.com', hasUKPassport: true, cseg: false, betaUser: true },
				{ username: '322373748', name: 'Ravinder Singh', email: 'ravinder@abcd.com', hasUKPassport: false, cseg: false, betaUser: false },
				{ username: '645658834', name: 'Natarajan Sundararaman', email: 'nataraj@abcd.com', hasUKPassport: false, cseg: false, betaUser: true },
				{ username: '678378240', name: 'Salomi William', email: 'salomi@abcd.com', hasUKPassport: false, cseg: true, betaUser: true },
				{ username: '545747483', name: 'Josiah Thomas Raj', email: 'jose@abcd.com', hasUKPassport: false, cseg: false, betaUser: true }
			],
			GROUPS: [{ label: '', value: 'GRP1' }, { value: 'GRP2', label: 'Filter groups based on' }, { value: 'GRP2', label: 'Filter on below conditions' }],
			GROUPED_OPTS: [
				{ value: 'NONE', label: 'Do Not Filter', disabled: false, group: 'GRP1' },
				{ value: 'GRPNAME', label: 'Group Name', disabled: false, group: 'GRP2' },
				{ value: 'GRPCOLOR', label: 'Group Colour', disabled: false, group: 'GRP2' },
				{ value: 'SITENAME', label: 'Site Name', disabled: false, group: 'GRP2' },
				{ value: 'SERVICE', label: 'Service Attached', disabled: false, group: 'GRP2' },
				{ value: 'CPE', label: 'CPE Assigned', disabled: false, group: 'GRP2' },
				{ value: 'SHOWINFO', label: 'Groups with comments', disabled: false, group: 'GRP3' },
				{ value: 'SHOWERROR', label: 'Groups with error', disabled: false, group: 'GRP3' },
				{ value: 'SHOWIGNORE', label: 'Groups with ignored sites', disabled: false, group: 'GRP3' },
				{ value: 'SHOWOVERRIDE', label: 'Groups with overridden sites and a really long long title display for testing. Still more content expected as the area is too long', disabled: false, group: 'GRP3' },
				{ value: 'SHOWSDWAN', label: 'Groups with SD-WAN settings this option should also get wrapped up and stay proper', disabled: true, group: 'GRP3' },
				{ value: 'SHOWONNET', label: 'Groups with On Net supported sites', disabled: false, group: 'GRP3' },
				{ value: 'NOSERVICE', label: 'Groups without Service', disabled: false, group: 'GRP3' },
				{ value: 'NOTRAFFIC', label: 'Groups without Traffic Demand', disabled: false, group: 'GRP3' }
			]
		}
	},
	methods: {
		customOne() {
			return {
				option: function (data, escape) {
					return `<div><div><span class="title">${data.name}</span></div><div><span class="subtitle">${data.email}</span></div></div>`
				}
			}
		},
		customTwo() {
			return {
				option: function (data, escape) {
					let badges = ''
					if (data.hasUKPassport) {
						badges += '<span class="badge">U</span>'
					}
					if (data.betaUser) {
						badges += '<span class="badge">&beta;</span>'
					}
					return `<div><div><span class="title">${data.name}</span></div><div><span class="subtitle">${data.email}</span>${badges}</div></div>`
				},
				item: function (data, escape) {
					return `<div>${data.name} [${data.email}]</div>`
				}
			}
		},
		listenTag(option) {
			console.log('Tag listed ', option)
		},
		detectSetChange(o) {
			console.log('Preload change test ', o)
		},
		dynamicValue() {
			let opt = []
			this.GRP_COLORS.forEach(d => {
				opt.push({ value: d.value, label: d.label + ' New', disabled: d.disabled })
			})
			this.$events.emit('selectize|sel4', { task: 'option', val: opt })
			this.$events.emit('selectize|sel6', { task: 'control', val: 'enable' })
		}
	},
	mounted() {
		console.log('Mounted main component')
		let opt = []
		this.GRP_COLORS.forEach(d => {
			opt.push({ value: d.value, label: d.label + ' New', disabled: d.disabled })
		})
		this.$events.emit('selectize|sel4', { task: 'option', val: opt })
		delay(() => {
			let tics = []
			for (let i = 1000; i <= 10000000; i += 100) {
				tics.push({ value: i, label: '' + i })
			}
			this.$events.emit('selectize|sel15', { task: 'option', val: tics })
		}, 300)
		setInterval(() => {
			this.disableDrop = !this.disableDrop
			this.$events.emit('selectize|sel15', { task: 'control', val: this.disableDrop ? 'enable' : 'disable' })
			console.log('Toggle disable props')
		}, 5000)
		delay(() => {
			this.$events.emit('selectize|sel5', { task: 'option', val: this.GRP_COLORS })
		}, 2000)
	},
	watch: {
		opt1(n, o) {
			console.log('Selected Old: ', o, ' New: ', n)
		}
	}
}
</script>
<style lang="scss">
.bt-selectize {
	.title {
		font-weight: bold;
		display: block;
	}
	.subtitle {
		font-size: 0.9em;
		text-decoration: italic;
		color: #777;
	}
}
</style>
